iframe中的页面requestFullScreen不能全屏问题

Posted 2023-05-01

参考技术A 最近做了个页面中有视频播放器，点击全屏按钮可以全屏，但是把页面链接提供给第三方系统用iframe去访问时，全屏功能失效，
后来发现是iframe的问题，iframe默认不能全屏需要添加allowfullscreen="true"属性才支持全屏

iframe 中的 iframe 不会加载

【中文标题】iframe 中的 iframe 不会加载

【英文标题】：iframe in iframe won't load

【发布时间】：2013-01-06 20:51:12

【问题描述】：

我遇到了一些跨域 iframe hack 的问题。

我的页面上有一个 iframe“if1”，其中包含另一个 iframe“if2”。

“顶部”页面在域 A 上运行。 if1 的页面在域 B 上运行。 而if2的页面是在域A上运行的。

我想要做的是：在 if1 中运行身份验证，将结果令牌作为哈希传递给 if2 的 url 并加载 if2。当加载 if1 的页面时，令牌已经通过身份验证，我只是添加了 if2 和已经生成的 url，如下所示：

<iframe name="if2" id="if2" src="http://example.com/testing#token=8927348962028" onload="javascript:alert('loaded');" onerror="javascript:alert('unable to load iframe');" ></iframe>

现在，if2 根本不加载，它只是保持白色。我总是收到“无法加载 iframe”的警报。 但这仅在 if1 嵌入“顶部”页面时发生。当我在浏览器的另一个选项卡中简单地加载 if1 的内容时，if2 加载完美。

是否有一些政策可以阻止加载二级 iframe？还是我错过了什么？

【问题讨论】：

它应该工作，我得到loaded 两次：fiddle。此外，框架仅显示其内容。

@Rune：好吧，看起来很安静，但是问题是否仅在您拥有域 A -> 域 B -> 域 A 时才会出现？因为据我所知，您的示例具有以下结构：域 A -> 域 A -> 域 B

你能给一个包含 iframe 的网站的链接吗？这样我就可以测试 A > B > A。

hm，我试过这个fiddle 在小提琴上插入 iframe 代码时似乎不起作用。 iframe 是白色的。当我保存小提琴（页面重新加载）时，内部 iframe 已加载。

我认为浏览器意识到如果他加载了 if2 它将是一个循环（因为 if2 也加载了 if1 ...）。我仍在测试，但这可能是问题所在。

【参考方案1】：

我找到了解决问题的方法。

如果您使用加载页面 B 的 iframe 加载页面 A，并且在其中再次加载页面 A 的 iframe，则您有一个循环，导致页面 A 加载页面 B 等等。

在我的情况下，浏览器停止加载第二个 iframe（再次加载页面 A 的 iframe）。 这似乎是防止这种循环的正常行为。

我只是在 if2 的 url 中添加了一个 ?innerframe=true 参数，并在设置该参数时阻止了 if1 的加载。这样循环消失了，问题也消失了。

@Rune：感谢您的帮助，fiddle 的链接对解决这个问题非常有帮助。

【讨论】：

是?innerframe=trueJavaScript？如果没有，请发布您的 iframe 代码！

这似乎是一个查询参数

如前所述，我将其添加到 url。所以它是一个 HTTP GET 参数。