无指定页面源时如何让iframe继承父域名以避免跨域问题？

嘿，这个问题确实戳中了空白iframe跨域交互的一个常见痛点！其实不用postMessage也有几种靠谱的方法，核心原理都是利用空白iframe在未加载外部跨域资源时，其文档的origin与父页面一致这个特性，直接进行同域级别的交互：

方法1：使用srcdoc直接嵌入脚本获取父域名 #

srcdoc属性允许你直接给iframe指定内嵌的HTML内容，这种情况下iframe的文档会继承父页面的origin，所以可以直接在内嵌脚本里访问window.parent的属性：

<iframe srcdoc="
  <!DOCTYPE html>
  <html>
    <script>
      // 直接获取父页面的域名/Origin
      const parentOrigin = window.parent.location.origin;
      const parentDomain = window.parent.location.hostname;
      
      // 在这里用拿到的父域名做后续处理
      console.log('父页面Origin:', parentOrigin);
    <\/script>
  </html>
"></iframe>

这种方式最直接，不需要额外的父页面脚本操作，iframe加载后就能自动拿到父域名。

方法2：父页面动态写入iframe内容 #

如果需要更灵活的控制，你可以在父页面里创建iframe，然后直接往它的文档中写入包含获取父域名逻辑的内容——因为是父页面直接写入的，此时iframe文档的origin和父页面一致，完全可以直接访问window.parent：

// 创建iframe并添加到页面
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);

// 获取iframe的文档对象
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 写入包含获取父域名的内容
iframeDoc.write(`
  <!DOCTYPE html>
  <html>
    <script>
      const parentDomain = window.parent.location.hostname;
      console.log('从父页面拿到的域名:', parentDomain);
      // 后续可以把这个域名存在iframe的全局变量里供其他脚本使用
      window.parentDomain = parentDomain;
    <\/script>
  </html>
`);
iframeDoc.close(); // 记得关闭写入流，触发文档加载

这种方法适合需要动态生成iframe内容的场景，父页面还能直接给iframe的window对象赋值，把父域名直接传递过去。

方法3：给iframe设置src="javascript:''"后直接交互 #

如果你的iframe一开始是空白的（没有指定src），可以先给它设置一个src="javascript:''"，这会让iframe加载一个空白的同域文档，之后父页面就能直接操作iframe的window对象，把父域名传过去：

<iframe id="myBlankIframe"></iframe>

<script>
  const iframe = document.getElementById('myBlankIframe');
  // 设置src为javascript:''，确保iframe文档与父同域
  iframe.src = "javascript:''";
  
  iframe.onload = function() {
    // 直接给iframe的window对象赋值，传递父域名
    iframe.contentWindow.parentDomain = window.location.hostname;
    
    // 或者在iframe里执行脚本获取
    iframe.contentWindow.eval(`
      const parentOrigin = window.parent.location.origin;
      console.log('父Origin:', parentOrigin);
    `);
  };
</script>

这个方法的好处是可以先创建空白iframe，后续再按需初始化并传递域名。

注意事项 #

• 这些方法仅适用于iframe未加载外部跨域资源的情况，如果之后给iframe设置了不同域的src，那之后就无法再直接交互了，必须用postMessage。
• 主流浏览器（Chrome、Firefox、Edge）都支持这些方法，但一些老旧浏览器（比如IE11）对srcdoc的支持有限，需要注意兼容性。

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