最近做微信公眾號頁面，因為入口不同，需要把公共頁面抽取出來，然后根據不同的值，傳遞給后臺不同的入口。剛開始用iframe頁面嵌套（第一次嘗試使用），但發現iOS系統對iframe嵌套頁面的高度和定位控制的不到位，具體表現為，當嵌套的子頁面的高度大于父頁面的高度，且子頁面中有觸發彈框事件時，這時，如果子頁面高度遠遠大于父頁面高度，就會出現彈框找不到的情況，其實可能是在視口以下，彈框的位置只是相對于子頁面來定位，并沒有相對于視口定位。
嘗試了好多種方法，均不理想，而安卓系統則表現良好，于是想到，iOS系統可直接做頁面跳轉，而安卓系統則正常使用iframe（如果安卓系統直接做頁面跳轉，會有問題，故使用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"></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) { //安卓終端使用iframe var 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 的完美解決方法(兼容iOS&安卓)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
