为什么设置 iframe 的 allowfullscreen 属性似乎没有保留该属性答案

【问题标题】：Why does setting the allowfullscreen attribute of an iframe doesn't seem to keep the attribute为什么设置 iframe 的 allowfullscreen 属性似乎没有保留该属性
【发布时间】：2016-08-11 06:08:46
【问题描述】：

在我的代码中，我设置了 iframe 的 allowfullscreen 属性，该属性被 SkyLight 包围，SkyLight 是 react.js 中用于模态视图的 npm 模块

            <SkyLight dialogStyles={myBigGreenDialog} hideOnOverlayClicked ref="simpleDialog">
              <iframe src=url frameborder="0" width="960" height="569" allowfullscreen="true"></iframe>;
            </SkyLight>

但是，当我检查页面时，我的 iframe 没有属性 allowfullscreen：

但是，当我在控制台中手动添加属性allowfullscreen="true" 时，iframe 可以全屏显示。

有谁知道如何在不通过控制台手动添加的情况下确保 allowfullscreen 属性存在？

【问题讨论】：

标签： javascript iframe reactjs

【解决方案1】：

见the documentation。

React 区分大小写，该属性称为allowFullScreen，而不是allowfullscreen。它也是一个布尔属性，所以true 不是它的有效值。

<iframe src="http://example.com" frameborder="0" width="960" height="569" allowFullScreen></iframe>

see a live demo

【讨论】：

它似乎工作正常！然而，这对我来说似乎很奇怪，因为 iframe 上的 mozilla 文档明确表示它都是小写的：developer.mozilla.org/en/docs/Web/HTML/Element/iframe
@MichaelGofron — 它并没有说它是全小写的，它给出了一个例子并使用全小写作为那个例子。 HTML 属性名称不区分大小写。 React 不是 HTML。 React 区分大小写。 React 倾向于使用 camelCase。
对于任何需要 React 中的完整属性列表的人，您可以在这里找到它：facebook.github.io/react/docs/tags-and-attributes.html
@MichaelGofron — 是的，我在这个答案的第一行链接到了这个……
我的 iframe 来自不同的来源，所以即使应用了您的解决方案，我也无法全屏显示，跨来源有什么限制吗？

【解决方案2】：

是的，当我手动添加 allowfullscreen="true" 时，它工作正常。下面是我的代码示例 -

<iframe width="640" height="360" src="example-embed-code" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"></iframe>

【讨论】：

我投了反对票，因为这不是答案。
对不起@Take-Some-Bytes，现在我已经写了一个更清晰的答案。谢谢。