如何构建与 Safari/WebKit 中的页面具有相同域的 iframe答案

【问题标题】：How do I build an iframe with the same domain as the page in Safari/WebKit如何构建与 Safari/WebKit 中的页面具有相同域的 iframe
【发布时间】：2010-11-06 17:50:38
【问题描述】：

场景：我正在编写一个可嵌入的小部件。它采用<script> 标记的形式，它构建一个包含它需要显示的所有内容的 iframe。 iframe 没有src，脚本用theIframe.contentWindow.document.write() 写入它。这将保持小部件包含在内，并防止元素 ID 和脚本与嵌入小部件的页面发生冲突。

诀窍：小部件必须能够更改其大小。为此，它设置其包含 iframe 的 style.height。这需要访问外部页面的 DOM。在 Firefox 和 IE 中，这是允许的，因为 iframe 的文档和外部文档被认为共享一个来源。

转折：然而，在 Safari 中，这两个文档被认为不共享一个来源。内部文档被认为位于about:blank，而外部文档显然使用了不同的协议和“域”（如果blank 可以被认为是域）。

问题：如何以编程方式构建一个 iframe，其文档 Safari/WebKit 会认为与创建它的窗口的文档具有相同的来源？

编辑：经过进一步的实验，无论我是否更改其内容，我都找不到以编程方式创建位置不是 about:blank 的 iframe 的方法。

如果我使用document.createElement() 创建框架，给它一个src，它指向一个名为“foo.html”的真实HTML 资源，然后document.body.appendChild() 它，Safari 的控制台会按预期显示该元素在 DOM 中，但是页面的内容没有出现，并且文档在侧边栏中被列为“about:blank”。

如果我直接在页面中包含 iframe 的 HTML，则会出现 foo.html 的内容，并且边栏中会出现“foo.html”。

如果我使用 document.write() 插入 HTML，我会得到与 document.body.appendChild() 相同的结果。

两个程序化版本都可以在 Firefox 中使用。

【问题讨论】：

标签： javascript iframe safari webkit same-origin-policy

【解决方案1】：

我能给出的最佳建议是将 iframe 设置为同一服务器上的空白页面（即 blank.html），然后编辑内容。背部疼痛，我知道，但这是一种解决方法。

你也可以试试

iframe.contentDocument.open("replace");
iframe.contentDocument.write("<b>This is some content</b>");
iframe.contentDocument.close();

但是，我不确定这是否仅适用于 IE。抱歉，我没有比这更有帮助的了。

【讨论】：

好主意。不过，这个问题似乎比我想象的要棘手。请参阅问题中的补充内容。

【解决方案2】：

啊哈。这似乎是 WebKit 中的一个错误。以编程方式创建 iframe 时，将忽略其 src 属性。相反，框架默认为about:blank，并且必须指向一个 URL 以指向其他地方。例如：

theIframe.contentWindow.location = theIframe.src

【讨论】：

我需要澄清一下。这个 javascript 需要在哪里执行，在父窗口中还是在 iframe 本身中？什么是 iframe 内容窗口？如果您指的是 iframe 的窗口对象，那不就是“theIframe”吗？这意味着您可以将其简化为“theIframe.location = theIframe.src”？任何帮助将不胜感激，因为我遇到了这个确切的错误。谢谢。
抱歉，我漏掉了一个点。这里的 theIframe 是 iframe 元素，而不是它包含的框架或窗口。 theIframe.contentWindow 是其承载内页的窗口对象。此代码在 iframe 添加到 DOM 之后在外部页面中运行。这是 contentWindow 第一次存在的地方（我相信）。这也是其他浏览器执行此操作的关键点：将 iframe 的窗口导航到 iframe 的 src。