logo标签列表

移动设备上的iFrames无法加载

androidhtmliosiframe
17

我一直找不到可行的答案。我有一个iframe（是的，在这种情况下我必须使用iframe），它在PC上运行良好，但在移动设备和平板电脑上根本无法加载。

页面上有一些Javascript代码，但删除它并不能解决问题。我还尝试将iframe的高度和宽度从百分比改为固定值。我还尝试删除iframe中除了src之外的所有属性，但仍然无法在iframe中加载任何内容。

以下是我的页面的简化版本，使用了我能够从其他建议中找到的内容。

<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
     <meta content='width=device-width, initial-scale=1.0' name='viewport'>
     <style type="text/css">
                body, html
                {
                    margin: 0; padding: 0; height: 100%; overflow: hidden;  -webkit-backface-visibility: visible;
                }

                #content
                {
                    position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
                }
            </style>
    </head>
    <body> 

    <script type="text/javascript">
    function onFrameLoad() {
            do stuff
    };
    </script>

    <div id="content">
    <iframe onload="onFrameLoad(this)" id="app" src="https://subdomain.mydomain.com" frameborder="0" height="100%" width="100%"></iframe>
    </div>
    </body>
    </html>

有人能告诉我为什么它在手机上不能正常工作吗？谢谢。

更新：在平板电脑上清除浏览器缓存解决了它的问题，但在手机上执行相同操作没有任何反应。我还尝试使用朋友的 iPhone（他们以前从未访问过该网站），但它无法加载。

我正在尝试在 iframe 中显示的 URL 在演示网站（如 w3schools）的移动设备上可以正常工作，因此不是 x- frame options 或浏览器不允许任何 iframes 的问题（尽管 x-frame options 会阻止其在所有设备上工作，但我已经检查了我能想到的所有东西）

如果需要，我可以通过消息提供实时示例 URL。

1
我觉得我找到原因了......子域名的URL是由第三方通过CNAME记录托管的，而他们在迁移到新版本时暂时“破坏”了他们的SSL证书。我认为安卓和iPhone浏览器的工作方式与Firefox相同，如果安全站点尝试显示混合内容，则不会显示。如果我使用以前没有使用过的浏览器，则页面不会显示，但是如果我使用过（即使清除缓存后）已经使用过的浏览器，则可以显示。他们应该在本周结束之前完成操作，希望这样能解决问题。 - Lyall
@JakeHolzinger iFrame 在笔记本电脑和平板电脑上以及第三方网站（W3Schools 等）上正确显示，所以我认为没问题。 - Lyall
你是否查看了 https://dev59.com/uH_aa4cB1Zd3GeqPzy4n 中的解决方案？这似乎是你在处理 iframe 时遇到的相同问题。 - Ellen
我不是安卓专家，但为了找到您问题的解决方案，我已经联系了这个响应式iframe，尝试一下，也许会对您有所帮助。 - always-a-learner
@SamuelTulach 我不知道如何在手机上使用Web控制台。在我的笔记本电脑上使用开发者工具/Web控制台时没有错误。 - Lyall
显示剩余5条评论
4个回答
7
问题就像我所怀疑的那样 - iframe 的 URL 调用了一些不安全的元素，而某些移动设备和平板电脑上的浏览器（以及 Firefox 桌面版）在内容在安全和非安全之间混合时将不显示任何东西（我的域名是全部 https）。
现在这些问题得到解决，一切都被安全地托管/调用，完全清除缓存并重新加载页面即可解决移动浏览器上的问题。
平板电脑能够正常工作而移动设备无法正常工作，纯粹是由于不同元素的 https 链接被破坏（重定向到 http），以及不同页面被缓存的时间不同。
5

现在是2019年，经过使用移动版Safari和Chrome浏览器测试，无论主页面使用的是http还是https协议，iframe的url都必须使用https。如果采用http协议，iframe将完全不加载。

0

我曾经在iOS的WebView上遇到过与iframe和跨域访问类似的问题。问题出在Cookie接受方面，这导致了一些问题。

问题出在UIWebView的Cookie安全策略（HTTPCookieAcceptPolicy）上，之前默认为NSHTTPCookieAcceptPolicyAlways。

但是从iOS 7开始，它被默认设置为NSHTTPCookieAcceptPolicyOnlyFromMainDocumentDomain，这导致我的应用程序出现了问题。

你的问题看起来不太一样，但可能是类似的问题。

0

可能与问题不相关，但是：

当我在我的安卓手机上使用https://localhost进行测试时，我的iframe打开后立即关闭。

问题是移动浏览器不信任我使用的SSL证书，因为它是开发SSL证书。我通过检查网络调试工具发现了这个问题，如下图所示：

Invalid cert

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接