Question

当我尝试我的代码时：

Testing.html -

<script language="JavaScript" type="text/javascript">
function find() { 
var iframeEl = document.getElementById('love');
if ( iframeEl.contentDocument ) {
    var form = iframeEl.contentDocument.document.getElementById('hi').getAttribute('href');
    alert(form)
} else if ( iframeEl.contentWindow ) {
    var form = iframeEl.contentWindow.document.getElementById('hi').getAttribute('href');
    alert(form)
} 
  }
</script>
<body onload="find()">
<iframe name="lovez" src="frame.html" id="love"><a href="http://www.google.com" id="hi">Testingz</a></iframe>
</body>

Frame.html -

<a href="http://www.google.com" id="hi">Testing</a>

它不会返回警告框。但是在Internet Explorer上它会。我一直在搜索互联网，尝试所有示例，但找不到一个可以在Google Chrome中运行的简单示例。我做错了什么还是谷歌浏览器？

Answer 1

我注意到，如果代码来自Web服务器，contentDocument和getSVGDocument（来自svg文件的svg对象）将正常工作，但是当我将代码复制到本地时文件，它将无法正常工作。

Here's a sample link我使用的代码可以在网络上运行但不能在我的磁盘上运行。

Here's the solution我刚从Chrome中找到（感谢Artem S），即使用--allow-file-access-from-files标记。

Answer 2

不使用.document

尝试

var form = iframeEl.contentDocument.getElementById('hi').getAttribute('href');

而不是

var form = iframeEl.contentDocument.document.getElementById('hi').getAttribute('href');

Answer 3

@IsraelGav的答案是正确的，因为从本地文件访问代码时会发生此问题，但从Web服务器访问时则不会。从某种意义上说，使用--allow-file-access-from-files标志可以允许Chrome访问本地文件也是正确的。

然而，它错过了一个重要的安全问题。关注点以及替代可能的解决方案最初都在this other SO answer by @orszaczky中描述。总结替代解决方案：在Windows上，安装http-server（npm install -g http-server）并从项目目录运行http-server。在Mac / Linux上，从本地目录运行python -m SimpleHttpServer。您现在可以在浏览器中访问本地托管的网站。在Windows上，我必须在Mac上使用localhost:8080我必须使用localhost:8000。

顺便说一下，这不仅是Chrome（v49.0）的问题，也是Windows和Mac上Opera（v35.0）的问题。

Google Chrome不会接受.contentDocument或.contentWindow！

3 个答案: