快捷導(dǎo)航

ios 不支持 iframe 的完美解決方法(兼容iOS&安卓)

更新時(shí)間：2017年07月06日 08:06:20 投稿：jingxian

下面小編就為大家?guī)?lái)一篇ios 不支持 iframe 的完美解決方法(兼容iOS&安卓)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近做微信公眾號(hào)頁(yè)面，因?yàn)槿肟诓煌?，需要把公共?yè)面抽取出來(lái)，然后根據(jù)不同的值，傳遞給后臺(tái)不同的入口。剛開(kāi)始用iframe頁(yè)面嵌套（第一次嘗試使用），但發(fā)現(xiàn)iOS系統(tǒng)對(duì)iframe嵌套頁(yè)面的高度和定位控制的不到位，具體表現(xiàn)為，當(dāng)嵌套的子頁(yè)面的高度大于父頁(yè)面的高度，且子頁(yè)面中有觸發(fā)彈框事件時(shí)，這時(shí)，如果子頁(yè)面高度遠(yuǎn)遠(yuǎn)大于父頁(yè)面高度，就會(huì)出現(xiàn)彈框找不到的情況，其實(shí)可能是在視口以下，彈框的位置只是相對(duì)于子頁(yè)面來(lái)定位，并沒(méi)有相對(duì)于視口定位。

嘗試了好多種方法，均不理想，而安卓系統(tǒng)則表現(xiàn)良好，于是想到，iOS系統(tǒng)可直接做頁(yè)面跳轉(zhuǎn)，而安卓系統(tǒng)則正常使用iframe（如果安卓系統(tǒng)直接做頁(yè)面跳轉(zhuǎn)，會(huì)有問(wèn)題，故使用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>網(wǎng)上申請(qǐng)</title>
</head>

<body>
  <script src="js/zepto.min.js"></script>
  <script>
  $(function() {
    var originId = sessionStorage.setItem('originId', '3'); //originId為后臺(tái)需要判斷是哪個(gè)入口的值
    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終端直接頁(yè)面跳轉(zhuǎn)
      location.href = 'index_common.html';
    } else {
      location.href = 'index_common.html';
    }
  })
  </script>
</body>

</html>

以上這篇ios 不支持 iframe 的完美解決方法(兼容iOS&安卓)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: