越来越在DOM的iFrame子页每DIV ID，然后生成家长从这些ID UL列表

Question

我已经下面列出父文档和iframe孩子：

parent.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));  
} 

DEMO： 由于Chrome有错误，我无法触发load没有src用于动态创建的iframe等有依赖于浏览器的演示：

http://jsfiddle.net/efzCu/2 - 在Firefox

http://jsfiddle.net/efzCu/3 - Works in Chrome

实况页面src不会要求依赖于浏览器的代码