iFrame 无法在手机或平板电脑上加载

新手上路,请多包涵

我一直无法找到有效的答案。我有一个 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 等演示网站上的 iframe 中工作,因此它不是 x-frame options 或浏览器不允许任何 iframe 问题(尽管 x-frame 选项会阻止它工作在所有设备上,但我已经检查了我能想到的一切)

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

原文由 Lyall 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 2.4k
2 个回答

问题正如我所怀疑的那样——iframe 的 URL 正在调用一些不安全的元素,并且如果内容混合在安全和不安全之间(我的域是所有https)。

现在这些都已修复并且所有内容都已安全托管/调用,完全清除缓存并重新加载页面甚至可以在移动浏览器上解决问题。

它在平板电脑而不是移动设备上运行的原因完全取决于时间和不同元素 https 链接何时断开(改为重定向到 http)以及不同页面何时被缓存。

原文由 Lyall 发布,翻译遵循 CC BY-SA 3.0 许可协议

现在是2019年,用mobile safari和chrome测试时,无论host page使用http还是https,iframe url都必须使用 https 。 http iframe 根本不加载。

原文由 h–n 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题