获取 iframe 中的元素

Question

我想获得位于 iframe 内的 body 元素 'tinymce'，如下所示的树..

html -> body -> div#wpwrap -> div#wpcontent -> div#wp-content -> div#wrap -> form#post -> div#editorcondainer -> div#poststuff -> div#post- body -> div#post-body-content -> div#postdivrich -> div#editorcontainer -> span#content_parent -> table#content_tbl.mceLayout -> tbody - > tr -> td.mceIframeContainer.mceFirst.mceLast -> iframe#content_ifr -> html -> body#tinymce.mceContentBody

为此我使用代码：

 var iframeEl = document.getElementById('content_ifr');
 alert(iframeEl);

 if ( iframeEl.contentDocument ) { // DOM

  var bdy = iframeEl.contentDocument.getElementById('tinymce');

 } else if ( iframeEl.contentWindow ) { // IE win

  var bdy = iframeEl.contentWindow.document.getElementById('tinymce');

 }

但 iframeE1 为空 :(

我正在尝试树中的其他 id，但它停止从“span id:content_parent”返回元素，最后一个 id 返回对象是“div id:editorcontainer”

如何获取 'span id :content_parent' 之后的元素

Answer 1

试试document.getElementById('content_ifr'); 上面的代码会寻找document.getElementById(undef);（因为你从来没有定义一个叫做content_ifr的变量）。

Answer 2

如果iframe 的来源与包含页面不在同一个域中，您将无法访问 iframe 的内容，因为它们位于不同的安全沙箱中。

Answer 3

<iframe> 使用新文档创建新的窗口上下文。所以给<iframe>一个名称属性，比如name="somename"，这样你就可以像这样访问它：

window.somename.document.getElementById('tinymce')

如果您无法访问 HTML，您可以先通过 JS 添加名称，如下所示：

document.getElementById('tinymce').setAttribute('name','somename');

对 SO 的一些挖掘提出了这一点：accessing a form that is in an iframe，它解释了如何仅使用 ID 来执行此操作。这应该总结了各种可能性。