HTML
jQuery

<frame>の中にある要素をjQueryのセレクタで取得する方法

More than 3 years have passed since last update.


概要

<frame>の中に配置された要素をjQueryで取得したい、という場面を考えます。


説明

下記のようなHTMLファイルがあり、id="catchme"のdiv要素のテキストをjQueryで書き換えます。jQueryのスクリプトはparent.htmlで取り込まれています。


parent.html(抜粋)

<frameset attr="略">

<frame id="f0" src="f0.html"></frame>
<frame id="f1" src="f1.html"></frame>
</frameset>


f1.html


<html>
<body>
<div id="catchme">hello</div>
</body>
</html>

$()の第2引数にbodyを渡してやることによって取得できます。

// NG

$('#catchme').text('Good night');

// OK
$('#catchme', top.frames[1].document.body).text('Good night');


編集後記



  • top.frames[1]の部分をtop.clientに変えるのではだめでした。

  • f1.htmlの中でjQueryを取り込むのが本来のやり方かと思います。今回は非常にレガシーなシステム(frameを使っている時点でお察し)なので…