ios 不支援 iframe 該怎麼解決?

零下一度
發布: 2017-07-20 13:27:56
原創
3718 人瀏覽過

iframe的怪異問題很多,Android有很多手機也不正常。
不建議在app上使用iframe。
雙webview比較安全,即把那個你原本放在iframe裡的頁面載入一個webview裡,append到主頁裡

具體表現為,當嵌套的子頁的高度大於父頁面的高度,且子頁面中有觸發彈框事件時,這時,如果子頁面高度遠大於父頁高度,就會出現彈框找不到的情況,其實可能是在視口以下,彈框的位置只是相對於子頁面來定位,並沒有相對於視口定位。嘗試了好多種方法,均不理想,而安卓系統則表現良好,於是想到,iOS系統可直接做頁面跳轉,而安卓系統則正常使用iframe(如果安卓系統直接做頁面跳轉,會有問題,即按下實體回傳鍵時,先前的表單提交頁的內容無法正常清空,而且如果嵌套多個表單,對應欄位會出現錯亂。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>网上申请</title></head><body><script src="js/zepto.min.js?1.1.11"></script><script>$(function() {var originId = sessionStorage.setItem('originId', '3'); //originId为后台需要判断是哪个入口的值var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isAndroid) {//安卓终端使用iframevar winH = $(window).height();var iframe = document.createElement('iframe');
            iframe.src = "index_common.html";
            iframe.style.width = '100%';
            iframe.style.height = winH + 'px';
            iframe.style.border = '0 none';
            iframe.setAttribute('scrolling', 'auto');
            document.body.appendChild(iframe);
        } else if (isiOS) {//iOS终端直接页面跳转            location.href = 'index_common.html';
        } else {
            location.href = 'index_common.html';
        }
    })</script></body></html>
登入後複製
弄了蠻久,記錄下自己的成長,如果有遇到類似問題的小夥伴,可以看看,也希望又看到可以改進的地方,多多指教。

 

以上是ios 不支援 iframe 該怎麼解決?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板