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

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

下面小編就為大家?guī)硪黄猧os 不支持 iframe 的完美解決方法(兼容iOS&安卓)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

嘗試了好多種方法，均不理想，而安卓系統(tǒng)則表現(xiàn)良好，于是想到，iOS系統(tǒng)可直接做頁面跳轉，而安卓系統(tǒng)則正常使用iframe（如果安卓系統(tǒng)直接做頁面跳轉，會有問題，故使用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&安卓)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

IOS中手風琴表不能移動的解決方法
本文給大家分享的是IOS開發(fā)中遇到的一個手風琴特效無法正常工作的問題的解決方法，經過度娘了很久才找到解決方法，這里推薦給大家，有需要的小伙伴可以參考下。
2015-05-05
iOS中Navbar設置漸變色效果的方法示例
這篇文章主要給大家介紹了iOS中Navbar設置漸變色效果的方法，文中給出了詳細的示例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-06-06
iOS實現(xiàn)微信分享多張圖片功能
這篇文章主要為大家詳細介紹了iOS實現(xiàn)微信分享多張圖片功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-01-01
iOS直播類APP開發(fā)流程解析
這篇文章主要為大家詳細解析了iOS直播類APP開發(fā)流程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
改變iOS應用中UITableView的背景顏色與背景圖片的方法
這篇文章主要介紹了改變iOS應用中UITableView的背景顏色與背景圖片的方法,將UITableView的header、footer設成clearColor時要注意實際效果是否真的變透明,需要的朋友可以參考下
2016-03-03
iOS開發(fā)技巧之WeakSelf宏的進化詳解
在程序中我們經常用到Block，但寫weak self 時會比較繁瑣，下面這篇文章主要給大家介紹了關于iOS開發(fā)技巧之WeakSelf宏的進化的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們一起來看看吧
2018-05-05
iOS 將系統(tǒng)自帶的button改裝成上圖片下文字的樣子
這篇文章主要介紹了 iOS 將系統(tǒng)自帶的button改裝成上圖片下文字的樣子,代碼是通過繼承UIButton，然后再重寫layoutSubviews方法，對自帶的圖片和titleLabel進行重新的layout。下面通過本文給大家分享下實現(xiàn)代碼
2016-12-12
詳解iOS多線程GCD的使用
Grand Central Dispatch (GCD)是Apple開發(fā)的一個多核編程的解決方法，本文給大家詳細介紹IOS中GCD的使用，需要的朋友參考下
2016-03-03
iOS功能實現(xiàn)之列表的橫向刷新加載
現(xiàn)今已有越來越多的APP需要橫向刷新的需求，而橫向刷新加載的控件卻寥寥無幾，即使有也是集成起來非常的麻煩，恰巧最近項目中又用到了這個功能，所以干脆自己來造個輪子，方便大家使用。
2016-08-08
iOS實現(xiàn)APP程序內部打開APP的AppStore頁面
這篇文章主要給大家介紹了關于iOS實現(xiàn)APP程序內部打開APP的AppStore頁面的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來看看吧。
2017-06-06