如何在 Javascript 中获取 iframe 元素中的元素？答案

【问题标题】：How to get the element inside an iframe element in Javascript?如何在 Javascript 中获取 iframe 元素中的元素？
【发布时间】：2011-12-11 19:14:39
【问题描述】：

我在文档中有如下元素，我可以通过document.getElementById('iframe_id') 获取 iframe 元素，但是如何获取这个 iframe 中的元素？我试过iframeElement.contentWindow，返回的DOMWindow没有属性。还尝试了iframeElement.docuemnt 和iframeElement.contentDocument，它们都是未定义的。我怎么才能得到它？我在实验中使用的是最新的 Chrome。

这是 iframe 元素

<iframe id='iframe_id'>
<html>
<body>many content here</body>
</html>
</iframe>

【问题讨论】：

您的页面和 iframe 内的页面是否来自同一个域？如果没有，chrome 可能不会让您访问其他 DOM。
@Tetaxa，如何检查 iframe 的域？他们很可能来自不同的域。
网址的第一部分。如果页面在同一台服务器上，你应该没问题。

标签： javascript google-chrome iframe

【解决方案1】：

你应该可以通过document.getElementById('yourIFrame').document.getElementById('yourElement')访问它

【讨论】：

【解决方案2】：

如果内容与询问内容的脚本具有相同的协议、域和端口号，您只能询问 iframe 中的内容。它被称为SAME ORIGIN

如果是这种情况，则此代码将显示内容。如果不是 - 您无法从普通 html 页面中的普通脚本访问 iframe

Demo - 在 IE8、Chrome 13 和 Fx6 中测试

function showIframeContent(id) {
  var iframe = document.getElementById(id);
    try {
      var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document;
      alert(doc.body.innerHTML);
    }
    catch(e) {
       alert(e.message);
    }
  return false;
}


<iframe id='iframe_id1' src="javascript:parent.somehtml()"> </iframe>
<br/>
<a href="#" onclick="return showIframeContent('iframe_id1')">Show</a>
<hr/>

<iframe id='iframe_id2' src="http://plungjan.name/"> </iframe>
<br/>
<a href="#" onclick="return showIframeContent('iframe_id2')">Show</a>
<hr/>

【讨论】：

以上示例 html 只是 Chrome 底部元素窗口的摘录（简化）。它表明 iframe 中有一个完整的 html。你的意思是这在 UI 中是假的？
是的。无论如何，如果页面来自同一台服务器，那么我的代码就可以工作。请参阅有关同一来源的更新
还是得到doc undefine，很奇怪。
我刚刚在我的 Chrome 中运行您的演示，消息框在 html 中显示了正确的内容。因此，正如 Tetaxa 在评论中提到的那样，Chrome 阻止访问内部 DOM 可能是一些安全问题，因为它来自不同的域。
如果协议、域或端口不同，这是一个安全问题。

【解决方案3】：

拥有：

var iframe = document.getElementById('iframe_id');

要获取您可以使用的内容文档：

var contDoc = iframe.contentDocument || iframe.contentWindow.document;

然后您可以通过 id 在 iframe 中搜索您的元素。

【讨论】：

我想这应该可行。但是在我运行你的 2 条语句后，我得到了 contDoc undefined 。返回的 iframe 似乎是正确的。
@Thomson：除非 iframe 源设置为另一个域，否则它将起作用。
我收到 Uncaught DOMException: Blocked a frame with origin "example.com" 无法访问跨域框架。 有什么提示吗？
@oneway：如果您拥有 iframe 代码，请检查解决方法：stackoverflow.com/a/25098153/750216