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

【问题标题】：iFrames not loading on mobile or tabletiFrame 无法在手机或平板电脑上加载
【发布时间】：2017-12-20 09:55:55
【问题描述】：

我找不到有效的答案。我有一个 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。

【问题讨论】：

我想我想通了...子域 URL 由第三方通过 CNAME 记录托管，并且在迁移到新版本时它们暂时“破坏”了 SSL 证书。我认为 android 和 iphone 浏览器的工作方式与 Firefox 相同，如果一个安全站点试图显示混合内容，它就不会显示。如果我使用以前未使用过的浏览器，则该页面不会显示，但如果我使用我已经使用过的浏览器（即使在清除缓存之后），它也会显示。显然，他们应该在这周解决这个问题，所以希望这能解决它。
虽然即使在我的平板电脑上清除缓存后，它仍然显示有效的 https 版本，一切都很好......嗯。令人困惑。
您是否遵守跨域资源共享 (CORS) 政策？ iframe 内容需要在响应中正确设置 Allow-Access-Control-Origin 标头，否则现代网络浏览器将阻止响应以保护用户。
@JakeHolzinger iFrame 在笔记本电脑和平板电脑以及第三方网站（W3Schools 等）上正确显示，所以是的，我认为没关系。
您是否在stackoverflow.com/questions/23355179/… 中检查过解决方案。您在 iframe 中面临的问题似乎与此相同。

标签： android html ios iframe

【解决方案1】：

问题正如我所怀疑的那样 - iframe 的 URL 调用了一些不安全的元素，如果内容混合在安全和非安全之间，移动设备和平板电脑上的某些浏览器（以及桌面上的 Firefox）不会显示任何内容（我的域名都是https）。

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

它在平板电脑而不是移动设备上运行的原因完全取决于时间以及不同元素 https 链接被破坏（重定向到 http）以及不同页面被缓存的时间。

【讨论】：

【解决方案2】：

现在是 2019 年，在使用移动 safari 和 chrome 进行测试时，无论主页使用 http 还是 https，iframe url 都必须使用 https。 http iframe 根本不加载。

【讨论】：

【解决方案3】：

我在通过 iOS 的 WebView 进行 iframe 和跨域访问时遇到了类似的问题。问题在于 Cookie Acceptance 导致问题。

问题在于 UIWebView 的 Cookie 安全策略 (HTTPCookieAcceptPolicy)，之前默认为 NSHTTPCookieAcceptPolicyAlways。

但从 iOS 7 开始，它默认为 NSHTTPCookieAcceptPolicyOnlyFromMainDocumentDomain，破坏了我的应用程序。

你的问题看起来不一样，但可能在相似的线上。

【讨论】：

【解决方案4】：

可能没有链接到问题，但是：

当我使用 https://localhost 在我的安卓手机上进行测试时，我的 iframe 一打开就关闭了，

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

【讨论】：