菜鸟教程小白 发表于 2022-12-12 11:06:53

ios - ionic iframe 加载无法在 iOS 上完全运行


                                            <p><p>我正在使用 ionic 开发移动应用。该应用程序有多个加载外部页面的 iframe。 iframe 加载在 android(设备和模拟器)和浏览器中运行良好。但在 iOS 上，外部页面并未完全加载到 iframe 中。页面在页面底部被截断，详情见截图:
<a href="http://i.stack.imgur.com/TQRTj.png" rel="noreferrer noopener nofollow">iOS Device Screen</a> </p>

<p>我的问题是为什么会发生这种情况以及为什么它可以在 android 上运行。
以下代码片段显示了我如何添加 iframe:</p>

<p><strong>page.html</strong></p>

<pre><code>&lt;ion-viewclass=&#34;center&#34; view-title=&#34;&#34;&gt;         
&lt;ion-content&gt;
&lt;!-- div used to enable scrolling in the iframe on iOS --&gt;
&lt;div class=&#34;scroll-wrapper&#34;&gt;
   &lt;iframe id=&#34;seats&#34; width =&#34;100%&#34; height =&#34;100%&#34; ng-src=&#34;{{seatPath}}&#34; ng-onload=&#34;hideProgess()&#34; ng-show=&#34;!loadError&#34; &gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/ion-content&gt;
</code></pre>

<p></p>

<p><strong>ma​​in.css</strong></p>

<pre><code>.center .scroll-content {
display: table !important;
width: 100% !important;
height: 100% !important;
text-align: center;
}
.center .scroll {
display: table-cell !important;
vertical-align: middle !important;
}

.scroll-wrapper {
position: fixed;
right: 0;
bottom: 50px;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}

.scroll-wrapper iframe {
height: 100% !important;
width:100% !important;
min-height: 100% !important;
bottom: 50px !important;;
}
</code></pre>

<p><strong>编辑:</strong><br/>
我已经测试了其他网页，当我将它们加载到 iframe 中时，即使在 ios 上也可以正常工作，这可能是我要加载的网页存在错误？</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>尝试将其添加到标签内的 config.xml 文件中:</p>

<pre><code>&lt;allow-navigation href=&#34;*&#34; /&gt;
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于ios -ioniciframe 加载无法在 iOS 上完全运行，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/37004161/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/37004161/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: ios - ionic iframe 加载无法在 iOS 上完全运行