为啥 iframe 仅在 iOS 中为空白？

Posted 2023-03-05

技术标签:

【中文标题】为啥 iframe 仅在 iOS 中为空白？【英文标题】：Why is iframe blank only with iOS?为什么 iframe 仅在 iOS 中为空白？ 【发布时间】：2021-09-15 22:16:57 【问题描述】：

有一个 html 页面可以在任何 Windows 和 android 上正常工作（显示 iframe 的内容）。由 Github Pages 托管。它在 ios 版本 12.5.1 上有效，但在 14.6（Chrome、Safari、Opera 上的空白页面）上不。为什么？

尝试src 和wikipedia - 一切正常。问题缩小到 iframe 和应用程序脚本的 src 的组合（分别正确打开）根据post，假设问题是混合的http/https。只是http 的样式是http://www.w3.org/2000/svg，我改成了https（甚至删除了所有样式）。没有效果。没有日志错误，只是空白页。似乎试图加载，但中断并停止。我没有要调试的ios设备。反馈用户。

如果你有 iOS 14，可以尝试打开this site。您看到什么空白页或访问错误？

像下一个这样的错误是正确的。它告诉你没有访问。

拒绝在框架中显示“accounts.google.com/...”，因为它将“X-Frame-Options”设置为“DENY”

如果您登录Google Account 并重试，Google 云端硬盘将出错。我在隐身模式下的任何平台上都有这一切。不要理他们。

仅对黑屏/停止加载的情况感兴趣，如下图所示

iOS 14.6

窗口

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Goofy</title>
    <style>
        html, body, iframe  width: 100%; height: 100%; margin: 0; border: 0; 
    </style>
</head>
<body>
    <iframe src="https://script.google.com/macros/s/AKfycbzmAfVL_ozEP69vpYvMo3t1Qlc4orPfk7eV5rWT/exec"></iframe>
</body>
</html>

带有XFrameOptionsMode.ALLOWALL的Apps Script渲染页面

function doGet() 
    return HtmlService.createHtmlOutputFromFile('launch.html')
             .addMetaTag('viewport', 'width=device-width, initial-scale=1')
             .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

【问题讨论】：

控制台说什么？ @TusharShahi 看了chrome://inspect，没有日志，没有错误 IFRAME一定要使用吗？在响应式网络时代，IFRAME 现在不是很流行。另外，您是否在启用开发者菜单的情况下使用 Mac Safari 调试您的移动 Safari？另外，iframe的src无法打开。可能是因为权限问题？ @Raptor 需要将src 插入我的主机（github 页面）。除了 iframe 但像 iframe 一样，还能做什么？ Android、Windows 和 iOS 12 - 有效。 iOS 14 出现问题。突然出现什么权限？ 【参考方案1】：

现在默认阻止跨站点资源的 Cookie (iOS 13+)。 Source。其他平台（iOS 12、Windows、Android）虽然不这样做。此类 cookie 需要使用 iframe 和 google src 在 github.io 上验证用户。这就是我在 iOS 14 上看到空白页的原因。

解决方法是转到浏览器的设置并允许 3rd 方 cookie。

谢谢Shivam's answer

【讨论】：

【参考方案2】：

这是浏览器方面的问题。由于 3rd 方 cookie，Safari 将阻止内容。除非用户自行设置，否则允许所有 cookie 的首选项。到目前为止，我只知道 Safari 会执行此操作。其他浏览器，我认为 iframe 中来自第三方的内容都可以。

【讨论】：

【参考方案3】：

您不能构建某些网站，因为出于安全原因，服务器不允许您访问（想象一下，一个随机页面 iframe 了您的 gmail 并窃取了您的所有数据）。因此，您将不得不修改谷歌脚本上的宏，并且可能会针对您正在尝试做的事情提出其他问题。 X-Frame-Options

【讨论】：

X-Frame-Options 仅在请求 accounts.google.com 时出现。当您使用当前浏览器登录时，它不会。并且可以在 Windows、Android、iOS 12 上正常运行。

以上是关于为啥 iframe 仅在 iOS 中为空白？的主要内容，如果未能解决你的问题，请参考以下文章

检查 DateTime 类型的值是不是在视图中为空，如果为空则显示空白