快捷導(dǎo)航

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

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

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

最近做微信公眾號(hào)頁(yè)面，因?yàn)槿肟诓煌枰压岔?yè)面抽取出來，然后根據(jù)不同的值，傳遞給后臺(tá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è)面來定位，并沒有相對(duì)于視口定位。

嘗試了好多種方法，均不理想，而安卓系統(tǒng)則表現(xiàn)良好，于是想到，iOS系統(tǒng)可直接做頁(yè)面跳轉(zhuǎn)，而安卓系統(tǒng)則正常使用iframe（如果安卓系統(tǒng)直接做頁(yè)面跳轉(zhuǎn)，會(huì)有問題，故使用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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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