为啥我无法访问设置了 src 或 srcdoc 属性的 iframe 文档？
Posted
技术标签:
【中文标题】为啥我无法访问设置了 src 或 srcdoc 属性的 iframe 文档？【英文标题】：Why cant I access iframe's document with src or srcdoc attributes set?为什么我无法访问设置了 src 或 srcdoc 属性的 iframe 文档？ 【发布时间】：2019-08-06 18:34:00 【问题描述】：<html>
<body>
<!-- <iframe id="iff" srcdoc="<div>ok</div>"></iframe> -->
<iframe id="iff" src="data:text/html;charset=utf-8,%3Cdiv%3Eok%3C%2Fdiv%3E"></iframe>
<script>
console.log(document.getElementById('iff').contentWindow.document)
</script>
</body>
</html>
-
我设置了
<iframe>的srcdoc（也试过src），但是无法访问iframe的真实文档（也试过iframeElement.contentDocument）。 Chrome 输出（也尝试过 Firefox）：
我在Get IFrame's document, from javascript in main document 中看到我无法获取跨域iframe 的文档，并且还从Which is the difference between srcdoc="..." and src="data:text/html,..." in an <iframe>? 中了解到src 和srcdoc 在跨域行为方面的行为不同。但我都试过了，都不行。
2。当我将子项附加到 iframe 的文档正文（带有src 属性集）时，DOM 会更新，但它不会显示在屏幕上。
【问题讨论】：
控制台中的内容与 DOM 中有关 iframe 的实际内容不同。 @zer00ne 但我也无法操作 iframe 的 DOM（设置了 src），例如 appendChild 如果您有一个带有 srcdoc 的 iframe，并且您想从其中获取内容到父页面，请使用importNode() 复制或 adoptNode() 移动。
@zer00ne 那可以工作，谢谢！但我仍然想知道 W3C 文档中是否有对这种行为的解释？
您遇到的冲突是由于一系列安全措施造成的，您正在测试的环境决定了与下一个不同的行为。 不要相信开发人员工具在涉及访问 iframe 时会显示给您的内容
【参考方案1】：
尝试类似：
window.frames['iff'].document.myvar;
如果您使用 url 查找 iframe，这会很有用：
var x=getIframeID("cool.php");
x.contentWindow.callafunction();
function getIframeID(iframeurl)
var iFs = top.document.getElementsByTagName('iframe');
var x, i = iFs.length;
while ( i-- )
x = iFs[i];
if(iframeurl.indexOf(x.src)>=0) return (x.id);
if (x.src == iframeurl) return (x.id);
return("");
【讨论】：
以上是关于为啥我无法访问设置了 src 或 srcdoc 属性的 iframe 文档？的主要内容，如果未能解决你的问题，请参考以下文章
在 iframe 中添加一个脚本标签，其内容由 srcdoc 设置