ios 不支持iframe 解决方案

Posted 风吹De麦浪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ios 不支持iframe 解决方案相关的知识,希望对你有一定的参考价值。

在iframe外层在包一层,通过appendChild()把内容增加到容器中,完整代码如下:

 1 @section Css
 2     {
 3     <link href="@ViewHelper.Content("/Content/css/mobiscroll.css")" rel="stylesheet" type="text/css" />
 4     <link href="@ViewHelper.Content("/Content/css/common.css")" rel="stylesheet" />
 5 }
 6 <style>
 7     .frame {
 8         margin-top: 55px;
 9         padding: 10px;
10         height: 90vh;
11         width: 100vw;
12         border: none;
13     }
14 </style>
15 <div id="iframe-box">
16     <iframe id="ifram" class="frame" width="420" height="330" src="@ViewBag.PathUrl.Replace("http://","https://")"></iframe>
17 </div>
18 @section Js{
19     <script>
20         var ifram = document.getElementById(‘ifram‘);
21         if (navigator.userAgent.match(/iPad|iPhone/i)) {
22             var iframe_box = document.getElementById(‘iframe-box‘);
23             iframe_box.style.width = 100 + ‘%‘;
24             iframe_box.style.overflowX = ‘hidden‘;
25             iframe_box.style.overflowY = ‘scroll‘;
26             iframe_box.style.webkitOverflowScrolling = ‘touch‘;
27             ifram.setAttribute(‘scrolling‘, ‘no‘);
28             iframe_box.appendChild(ifram);
29         }
30     </script>
31 }

 

以上是关于ios 不支持iframe 解决方案的主要内容,如果未能解决你的问题,请参考以下文章

解决 iframe 在 ios 上不能滚动的问题

解决iOS与pad里ifram无法滑动问题

转让iframe在iOS设备手机浏览器上支持滚动

解决:iphone iframe内的页面不能滑动问题

使用iframe后 浏览器后退不能使用!如何解决!

结合两个代码片段?将用户输入的 Youtube url 转换为嵌入 url,然后将 iframe src 替换为转换后的 url