嵌套的iframe没有全屏

Question

我有3个html页面。

grandparent.html - 包含1个iframe，其中allowfullscreen属性设置为source设置为parent.html

parent.html - 包含1个iframe，其中allowfullscreen属性设置为source设置为child.html

child.html - 包含1个div，其中包含一个在父级上请求全屏的按钮

所有3个页面都位于同一个域中。

点击child.html中的按钮，当我在浏览器中加载“grandparent.html”时，我想让parent.html中的iFrame全屏显示。但这失败了。什么都没发生。但是，当我在浏览器中加载“parent.html”时，它会全屏显示。

出于某种原因，grandparent.html中的iframe会阻止parent.html中的iframe全屏显示。这很奇怪，因为祖父母iframe的allowfullscreen也设置为true。

此外，从子按钮onClick处理程序，我可以通过使用parent.parent.document.getElementById（'grandParentIframe'）访问它来使祖父母的iframe全屏显示;

但这不是我想要做的，因为我的grandParent很可能会在不同的域上。我希望通过嵌套iFrame可以克服跨域限制，但即使现在所有三个页面都具有相同的域，主机和协议，它也不起作用。

请帮忙！ SM

Answer 1

如果你有嵌套的iframe，那么这个非常简单，你所要做的就是将每个iframe设置在链上，以允许使用屏幕。

如果您无法直接从代码中设置iframe，那么您需要让父页面加载允许此内容的脚本，或者在不友好的内容中创建一个iframe，其内容与父，并从那里加载一些专用脚本。我不打算在这里设置一个iframe破坏者，但随便问你是否好奇。