Question

我正在尝试从父窗口中读取包含在div标签中的子IFrame的特定内容。我正在使用

detailsValue = window.frames['myIframe'].document.getElementById('result').innerHTML;

有了这个我能够访问该帧的整个内容。但我只需要访问该内容的一部分。问题是包装我正在寻找的内容的div只包含类而没有ID。

<div class="watINeed"> <table class="details"> </table> </div>

我无法访问表格形式的内容（没有ID，只有类）。

任何帮助。

Edit1：我需要访问表的内容以检查字符长度以及该内容中存在的某些html标记。

Answer 1

你可以使用普通的Javascript（Notulysses提到）：

window.frames['myIframe'].document.querySelector('.watINeed .details')

或使用jQuery（因为您获得了jquery），将iframe的document指定为context到$：

$(".watINeed .details", window.frames['myIframe'].document)

在后一种情况下，你有一个完整的jQuery对象。

请注意，在任何一种情况下，iframe的文档都必须位于同一个域中，否则您将遇到跨域问题。

针对jQuery 2.0.x进行测试

更新

如果您在包含页面的页面加载期间运行选择器，则在访问其内容之前，您必须先收听iframe的load事件：

$(window.frames['myIframe']).on("load", function(){
     // above query here  
});

Answer 2

如果您正在寻找一个普通的Javascript，并且您的目标div是启动选择器的直接子项，那么这是一项简单的任务

   var detailsValue = window.frames['myIframe'].document.getElementById('result').innerHTML;
    var target;
    for(var i = 0; i< detailsValue.children.lenght; i ++){
     if(detailsValue.children[i].getAttribute('class')== 'watINeed'){
      target = detailsValue.children[i] ;

     }
    }

否则，必须写一个递归方法来废弃结构的所有子项

Answer 3

正如我上面所写，可以使用以下方法完成：

document.querySelectorAll(".className")[0] or $(".className")[0]

这些基本上与返回节点列表相同，而[0]只是意味着从列表中获取第一个结果。

有两件事需要注意：

iframe以异步方式加载内容，因此当您执行查询时，您搜索的元素很可能尚未加载。 在DOM加载后执行代码是不够的。
解决方案只是将代码放在一个块中，该块执行一次加载所有异步内容：
```
window.onload=function(){
    window.frames['myIframe'].document.querySelectorAll(".watINeed")[0];
}
```
或jQuery替代方案：
```
$(window).load(function(){
    window.frames['myIframe'].document.querySelectorAll(".watINeed")[0];
});
```

第二件事是，根据页面 Here ，您可以使用contentWindow.document访问iframe的文档：

window.onload=function(){
    window.frames['myIframe'].contentWindow.document.querySelectorAll(".watINeed")[0];
}

或jQuery替代方案：

$(window).load(function(){
    window.frames['myIframe'].contentWindow.document.querySelectorAll(".watINeed")[0];
});

直播示例： Fiddle

用class获取div标签的内容

3 个答案:

更新