Chrome 仅在某些网站上强制框架使用白色背景

Question

我正在构建一个注入本地页面的 Web 扩展，并且在某些网站上遇到了奇怪的 Chrome 限制：我无法将 iframe 设置为透明：

\n

\n

在 GitHub.com（登录后）或 Google 上尝试：

\n

document.body.insertAdjacentHTML(\n  \'afterbegin\',\n  \'<iframe style="background: red" srcdoc="<style>body {background:none}">\'\n)\n

\n

您将看到显示 iframe 页面\xe2\x80\x99s 背景（白色），而不是元素\xe2\x80\x99s 背景（在本例中为红色以突出显示问题）。

\n

如果您在 StackOverflow 或 Twitter 上尝试相同的代码，您会发现 iframe 是红色的。

\n

我认为这是由于安全原因，但奇怪的是，它甚至发生在这个缺乏任何安全标头的简单网站上： https: //sjmulder.nl/en/textonly.html

\n

Firefox 和 Safari 不受影响。

\n

Answer 1

对于任何寻找快速复制粘贴答案的人：在注入的 iframe 中包含颜色方案元标头。它必须与网页的颜色方案标题匹配（如果存在）。如果网站没有元标头，请勿添加元标头。由于这需要通过编程来确定此类标头是否存在以及内容值是什么，因此这些步骤被省略，但一旦知道该方案，注入代码将如下所示：

document.body.insertAdjacentHTML(
    'afterbegin',
    '<iframe style="background: red" srcdoc="' +
    '<meta name=\'color-scheme\' content=\'light dark\'>' + 
    '<style>body {background:none}">')

接下来是更详细的答案，以及我是如何发现它的。

屏幕截图显示 macOS 处于深色模式。如果您进入操作系统设置并在浅色和深色之间切换外观，则 iframe 后面的白色和红色将会交替出现。尝试看看是否会发生这种情况。

经过一些实验，我发现当一个网站有一个用于颜色方案的元标题：

<meta name="color-scheme" content="light dark">

与 Github.com 和sjmulder.nl的情况一样，没有匹配标头的 iframe 只能正确处理浅色模式，并且如果用户设备设置为更喜欢深色模式，则会呈现白色背景。我怀疑这是因为“如果没有另外配置，主要浏览器默认为轻型模式”。

您可以对此进行试验，并将测试网站上的颜色模式标题切换为“浅色”（仅）和“深色”（仅），而无需在注入的 iframe 中指定任何内容；或者在 iframe 中而不是在网站上定义它，然后切换设备颜色模式首选项以查看效果。我得出的结论是标题必须与 iframe 背景颜色匹配才能正确应用。

我在某些网站上遇到了奇怪的 Chrome 限制

当网站没有定义颜色方案元标头并且注入的 iframe 也没有定义颜色方案元标头时，不会出现不匹配，也不会出现问题，这就是为什么此问题仅出现在某些网站上的原因。我还尝试了其他浏览器（Edge、Opera），它们也有同样的问题，至少在 macOS 上是这样。但它可以在扩展中修复，方法是首先检查页面上是否存在元标头，如果存在，则将相同的标头应用于注入的 iframe。

Answer 2

阅读 @neea\xe2\x80\x99s 答案以获得更广泛的解释，但这里有一个适用于任何地方的快速修复：color-scheme: normal通过样式表或内联将 CSS 添加到 iframe：

\n

<iframe style="border: 0; color-scheme: normal" src="your-url.html">\n

\n

仅当 iframe 页面在深色和白色背景上都能正确显示时才执行此操作。您可能还需要color-scheme: normal通过元标记在 iframed 页面中进行设置，但这不是必需的。

\n

为什么 Chrome 会这样做

\n

浅色方案通常显示黑色文本和白色背景，深色方案则相反。Chrome 使用该color-scheme属性来了解网站支持哪些方案。缺少它意味着它只支持 light 方案。

\n

如果主页以深色方案显示，而 iframe 页面未显示，则使用透明背景，您将在主页上看到 iframed 页面\xe2\x80\x99s 黑色文本\xe2\x80\x99s 黑色背景。

\n

这是一种安全机制，可确保 iframe 内容仍然可读。如果您删除它，您将需要手动确保 iframe 页面在深色背景上也可读。

\n

现场演示

\n

可以看到，在深色模式和常规模式下，两个 iframe 都没有背景。

\n

\n

• 页面只有一种方案，iframe 从不显示白色背景：实时链接

  \n

  

  \n
\n

• 页面只有2个方案，iframe从不显示白色背景：实时链接

  \n

  

  \n
\n

\n