javascript - 在 iFrame DOM 中获取子页面中的每个 div id，然后从 Parent 中的这些 id 生成 UL 列表

Question

我有父文档和 iframe 子文档，如下所示：

父.html

<div id="parent">
    <iframe src="child.html"></iframe>
</div>
<div><!-- the UL List getting from child.html will be displayed here--></div>

child.html

<div id="child_element_1"></div>
<div id="child_element_2">
    <div id="child_element_2_1"></div>
    <div id="child_element_2_2"></div>
</div>
<div id="child_element_3">
    <div id="child_element_3_1"></div>
</div>

我想要的是一个 UL 列表，它具有 child.html 中每个 div id 的层次结构。（见下图）

之后，我想将 UL 放在 parent.html 中的某个位置，非常感谢您提前的支持。欢迎使用 Jquery 或 JavaScript。

Answer 1

以下假设 iFrame 在同一个域上，否则您没有脚本访问权限。

/* page load code*/
$(function(){
    $('#iframeID').on('load',function(){   
        iframeToList( $(this).contents().find('body'))
    });
});

function divToList( $root){
     var html=['<ul>'];
    $root.children('div[id]').each( function(){
        html.push('<li>'+this.id);
        var $children=$(this).children('div[id]')
        if( $children.length){
            html.push( divToList( $(this)))
        }
         html.push('</li>')
    })
    html.push('</ul>')
    return html.join('');

}

function iframeToList( $root){
    $('body').append( divToList($root));    
}

演示：load由于 Chrome 中的错误，如果没有src动态创建的 iframe， 我将无法触发，因此有与浏览器相关的演示：

http://jsfiddle.net/efzCu/2 - 在 Firefox 中工作

http://jsfiddle.net/efzCu/3 - 在 Chrome 中工作

具有真实页面的实时页面src不需要依赖于浏览器的代码