Question

我有以下页面代码：

<html>
  <body>
    <div id="AAA"> SOME CODE </div>
    <div>
      <iframe>
        <html>
          <div id="AAA"> SOME CODE </div>
          <div id="myDiv"> MORE CODE </div>
        </html>
      </iframe>
      <iframe>
        <html>
          <div id="AAA"> SOME CODE </div>
          <div id="myDiv2"> MORE CODE </div>
        </html>
      </iframe>
    </div>
  </body>
</html>

现在，有趣的部分。我可以把手放在div "myDiv"上。然后我想修改div "AAA"的内容，即同一iframe中的内容。但是，如果我这样做

 myDiv.ownerDocument.getElementById("AAA")

我得到iframe之外的元素 - 注意有三个元素id =“AAA”......

我的问题是，给定一个元素，我如何将手放在其包含的iframe上，而不是放在最顶级的文档上？

感谢任何帮助。

Answer 1

使用jQuery：$('iframe').contents().find('#123')

Answer 2

你能否使用以下内容？

first_iframe = document.getElementsByTagName('iframe')[0];
first_iframe.contentWindow.document.getElementById('123')

然后你可以引用sucesive iframe：

first_iframes_child = first_iframe.document.getElementsByTagName('iframe')[0];
...

虽然我建议贵公司使用jQuery / Prototype而不使用iframe，但它可能会让你的生活更轻松。

Answer 3

脱离我的袖子，尝试这样的功能：

function GetTopElement(child) {
    var parent = child.parentNode;
    while (parent) {
        var node = parent.nodeName.toLowerCase();
        if (node == "body" || node == "html")
            break;
        parent = parent.parentNode;
    }
    return parent;
}

//usage:
var topLevel = GetTopElement(myDiv);
topLevel.getElementById("AAA")...

JavaScript - 文档中的iframe：getElementById（）

3 个答案: