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

Question

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

7

我在文档中有一个如下的元素，我可以通过 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>

- Thomson

2

你的页面和 iframe 中的页面是否来自同一域？如果不是，则 Chrome 可能无法访问其他 DOM。 - Tetaxa

@Tetaxa，如何检查iframe的域名？它很可能来自不同的域名。 - Thomson

如果页面在同一服务器上，您应该没问题。请返回URL的第一部分。 - Tetaxa

3个回答

4

有：

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

要获取内容文档，您可以使用以下方法：

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

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

- Răzvan Flavius Panda

我想这应该可以工作。但是在运行您的两个语句后，我得到了未定义的contDoc。返回的iframe似乎是正确的。 - Thomson

1

@Thomson：除非 iframe 源设置为另一个域，否则它将正常工作。 - Răzvan Flavius Panda

我遇到了“未捕获的DOM异常：阻止了源自“http://example.com”的框架访问跨源框架”的问题。有什么提示吗？ - rnrneverdies

@oneway: 如果你拥有 iframe 代码，请检查解决方案：https://dev59.com/Q18f5IYBdhLWcg3wD-8v#25098153 - Răzvan Flavius Panda

0

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

- dwalldorf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mplungjan · Accepted Answer

您只能在iframe中查询内容，如果该内容具有与查询脚本相同的协议、域和端口号。这被称为同源策略。

如果是这种情况，那么此代码将显示内容。否则-您无法从普通html页面中的普通脚本访问iframe。演示-在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/>