如何实现iframe内容无缝融入页面并继承父页面样式？

问题根源 #

iframe是独立的HTML文档，和父页面属于不同的DOM上下文，子页面里的font-family: inherit只能继承自身文档内父元素的样式，根本拿不到父页面的字体设置，所以直接继承行不通。

可行方案（无需修改子页面） #

在父页面中添加一段简单的JavaScript代码，等iframe加载完成后，自动向其内部注入样式，强制子页面使用父页面的字体样式。操作全程只需要修改主页面，子页面完全不用动。

修改后的主页面代码 #

<!DOCTYPE html>
<html lang="nl">
  <meta charset="utf-8">
  <title>Container for iframe</title>
  <style>
    html, body, #main   { height: 100%; margin: 0; padding: 0; } /* 去掉默认边距更无缝 */
    iframe              { height: 100%; width: 100%; border: none; } /* 移除iframe边框 */
    body, #main         { font-family: sans-serif; }
    #main               { background-color: azure; }
    iframe, #main       { height: 100%; width: 100%; }
  </style>
  
  <p>Container for iframe</p>
  <p><a href="choice-1.html" target="content">Inherit font from iframe</a></p>
  <p><a href="choice-2.html" target="content">Choice two</a></p>
  
  <div id="main" style="background-color: azure; color: red">
   <p>Show iframe below:</p>
   <iframe id="contentFrame" name="content" src="choice-1.html"></iframe>
  </div>

  <script>
    const iframe = document.getElementById('contentFrame');
    // 等iframe加载完成后注入样式
    iframe.addEventListener('load', function() {
      // 获取父页面实际使用的字体
      const parentFont = getComputedStyle(document.body).fontFamily;
      // 创建样式标签
      const styleTag = iframe.contentDocument.createElement('style');
      // 强制子页面所有元素使用父页面字体，!important确保覆盖子页面原有设置
      styleTag.textContent = `* { font-family: ${parentFont} !important; }`;
      // 把样式插入子页面的head
      iframe.contentDocument.head.appendChild(styleTag);
    });
  </script>
</html>

注意事项 #

• 这个方法要求父页面和子页面在同一个域名下（同源），如果是跨域嵌入，浏览器会阻止JavaScript访问iframe内部内容，这种情况无法使用该方案。
• 代码里加了border: none和去掉默认边距的样式，能让iframe和父页面更无缝融合。

内容的提问来源于stack exchange，提问作者clp