0

以下にリストされているように、親ドキュメントと 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>

私が欲しいのは、child.html のすべての div id の階層を持つ UL リストです。（下の写真を参照）

あとはparent.htmlのどこかにULを入れたいのでよろしくお願いします。Jquery と JavaScript のどちらも大歓迎です。

4

1 に答える 1

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

デモ: Chrome のバグにより、動的に作成された iframeloadなしではトリガーできないsrcため、ブラウザ依存のデモがあります:

http://jsfiddle.net/efzCu/2 - Firefox で動作

http://jsfiddle.net/efzCu/3 - Chrome で動作

実際のライブ ページでは、srcブラウザに依存するコードは必要ありません

于 2013-02-09T14:03:05.193 に答える