更改嵌套在iframe中的iframe的src

Question

我在Chrome中遇到了问题（在本地运行文件），当我尝试更改iframe内部的iframe的src时，会出现以下错误信息：

Error = Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

这是我用来检索iframe的代码。

iframe = $("iframe").contents().find('iframe');
iframe.attr("src", url);`

当我将文件上传到服务器时，我不会遇到这个问题。但是如果我在本地打开它们，就会出现错误。

在Firefox和Safari中运行良好。

如何在Chrome和其他浏览器中解决这个问题？

- marianocodes

---

你为什么这样做？似乎有比多层iframe更好的方法。 - DACrosby

您遇到了与同源策略相关的问题。为了在本地进行测试，请确保不要硬编码域名。 - gilly3

这是 Chrome 浏览器的一项安全特性。 - Teemu

@user3232331 不确定，是两个 iframes 还是一个文档内的一个 iframe？感谢分享。 - guest271314

@user3232331 请查看帖子。感谢分享。希望这有所帮助。 - guest271314

Answer 1

所有浏览器内置的安全特性确保JavaScript无法与从不同网站加载的其他窗口或帧中的对象进行交互，这通常称为"同源策略"。是否从不同网站加载某些内容是由URL的主机名部分确定的。例如，如果外部框架从http://yoursite.com加载并且内部框架从http://example.com加载，则在外部框架的范围内运行的JavaScript将无法访问或修改内部框架范围内的任何属性或对象。

在此情况下，具体的错误指示您正在运行于外部框架上下文中的JavaScript被拒绝访问作用域为内部框架的对象（contentDocument）。您尝试使用的jQuery中可能隐含地访问了框架的document元素（通过iframe的contentDocument属性访问）。

您可以通过销毁iframe并重新创建具有所需src的新iframe来解决此问题。

- thomasrutter