web-dev-qa-db-ja.com

jQueryからフレーム（iframeではない）コンテンツにアクセスする方法

このように1ページに2つのフレームがあります（home.html）

<frameset rows="50%, 50%">
        <frame id="treeContent" src="treeContent.html" />
        <frame id="treeStatus"  src="treeStatus.html" />
</frameset>

そして、1つのフレームで（treeStatus.html）私は次のようなものを持っています

<body style="margin: 0px">
<div id="statusText">Status bar for Tree</div>
</body>

トップウィンドウから、jqueryを介して子フレームにあるdivを操作します（表示と非表示など）。

私は いくつかquestionslikethis を見てきました、そして彼らは以下を示唆しています

$(document).ready(function(){

            $('#treeStatus').contents().find("#statusText").hide();
     });

これがiframeで機能するかどうかはわかりませんが、単純なフレームがある場合は機能しないようです。コードはhome.html内に配置されます

ここにfirebugコンソールからの出力があります

>>> $('#treeStatus')
[frame#treeStatus]
>>> $('#treeStatus').contents()
[]
>>> $('#treeStatus').children()
[]

では、トップフレームからフレーム要素にアクセスするにはどうすればよいですか？ここで何か不足していますか？

回答

ここで両方の答えを組み合わせた後、正しい方法は

$('#statusText',top.frames["treeStatus"].document).hide();

これが機能するためには、フレームは次のようにIDとは別にname属性を持っている必要があります。

<frameset rows="50%, 50%">
            <frame id="treeContent" src="treeContent.html" />
            <frame name="treeStatus" id="treeStatus"  src="treeStatus.html" />
    </frameset>
javascriptjqueryhtmlframe
26
kazanaki

操作したいフレームとdivを取得して、変数に渡すことができます。

var statusText = top.frames["treeStatus"].document.getElementById('statusText');

その後、jQueryを介してやりたいことをすべて実行できます。

$(statusText).whatever();

フレームを使用する必要がない場合もありますが、<frame>タグはHTML5では廃止されました。 HTML5への移行を計画している場合は、iFrameを使用する必要があります。

12
Charles Caldwell

アクセスするフレームへの参照を提供する必要があります。

$("some selector", top.frames["treeStatus"]))
5
RoToRa

ネストされたフレームがあります。私の場合、それを機能させるためにコマンドを使用しました：

var statusText = 
top.document.getElementById("treeStatus").contentDocument.getElementById("statusText");

次に、Charlesがすでに回答したように、jQueryを使用して、やりたいことをすべて実行できます。

$(statusText).whatever();
5
user2100764

純粋なjqueryソリューション（top.framesなどを必要としない）の場合、次のように機能します。

$('some selector for item from frame' ,$('frame selector')[0].contentDocument)

これには、ネストされたフレームに対して機能するという利点があります。

$('inner frame item selector', $('inner frame selector', $('outer frame selector')[0].contentDocument)[0].contentDocument)
2
bacar

https://jamesmccaffrey.wordpress.com/2009/07/30/cross-frame-access-with-jquery/

    $(document).ready(function(){
     $("#Button1").click(function(){
      $(parent.rightFrame.document).contents().find(‘#TextBox1’).val(‘Hello from left frame!’);
     });
    });

しかし、私は使用しました：

    $.post("content_right.php",{id:id},function(data)
     $(parent.frames["content_right"].document.body).html(data) ;
    });
2
Ionut Catalin Badea