javascript - 如何使用 Prototype 处理 iframe contentDocument

Question

问题是，默认情况下，Prototype 库无法访问 iframe 中的任何内容。

我发现了一些解决方法(例如 example)，但没有人提供对 protytpe/iframe 的完全支持。有谁知道这样做的方法吗？

PS:不使用 iframe 不是一个选项:)

Answer 1

如果您想在不同的文档中使用 Prototype⟩— 并且 iframe 是不同的文档⟩— 您必须在每个文档中包含该脚本，并使用正确的副本来访问关联的文档。

jQuery 和任何其他直接引用 document 的框架也是如此。库的每个实例都与其自己的 document 对象相关联。因此，当您从父脚本创建元素时，它的 ownerDocument 就是父窗口。尝试将该元素附加到 iframe 的文档中，您应该会得到一个 DOMException.WRONG_DOCUMENT_ERR。

var iframe= $('myiframe');
// get window and document objects for iframe (IE compatible)
var idoc= iframe.contentDocument || iframe.contentWindow.document;
var iwin= iframe.contentWindow || iframe.contentDocument.defaultView;

Element.extend(idoc);
idoc.body.insert('<div>hello</div>'); // fail, wrong document

iwin.Element.extend(idoc); // use the copy of Prototype in the iframe's window
idoc.body.insert('<div>hello</div>'); // ok

(请注意，在 Firefox 中，您实际上不会收到 WRONG_DOCUMENT_ERR，因为它们会故意默默地为您修复此错误。但更复杂的操作会很快使您陷入奇怪、不一致的状态。)

大多数 JS 库旨在简化单文档脚本编写；它们隐藏了 DOM 操作中涉及的许多血淋淋的细节，其中一种方法是省略 document 对象。但这使得它们不太适合跨文档脚本，在这种情况下，知道要使用哪个 document 至关重要。

跨文档脚本已经很困惑了。使用不是专门为处理它而设计的 JS 框架(我不知道有一个是这样的)只会让生活变得更加怪异。