ios 不支持 iframe 的完美解決方法(兼容iOS&安卓)
編輯：IOS開發綜合
最近做微信公眾號頁面，因為入口不同，需要把公共頁面抽取出來，然後根據不同的值，傳遞給後台不同的入口。剛開始用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&安卓)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持本站。
相關文章
+