【JavaScript】別のフレームのデータ取得方法 - タイガー！タイガー！じれったいぞー！（SE編）

概要

フレームを使ったWebページを作成した場合、表示されている別フレームの情報を取得したいケースがあります。その場合、JavaScriptを使って情報を取得します。

formの部品要素の取得

(1) 特定のform要素にname属性を追加し、名前を付けます。

<p><input type="text" name="value01" value="あああああ"></p>

(2)JavaScriptでは、下記の記述で取得できます。

parent.フレーム名.document.forms[フォーム名または番号].要素名称.プロパティ

id属性付き要素の取得

(1)特定の要素にid属性を追加し、名前を付けます。

<button type="button" id="button01" onClick="displayValue01()">フレームBのテキスト表示</button>

(2)JavaScriptでは、下記の記述で取得できます。

parent.フレーム名.document.getElementById("ID名称").プロパティ

※innerHTMLプロパティ・・・ドキュメントにあるIDを取得して、タグ内のHTMLを参照します。

サンプルソース

メインのソース（test03.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>フレーム・テスト</title>
    <frameset rows="150,*" border="0">
        <frame src="test03a.html" name="frm_a">
        <frame src="test03b.html" name="frm_b" noresize>
    </frameset>
</head>
</html>

フレームＡのソース（test03a.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
    <title>フレームＡ</title> 
    <script type="text/javascript">
    <!--
    function displayValue01(){
            alert('フレームBのvalue01：' + parent.frm_b.document.forms[0].value01.value);
    }
    // -->
    </script>
</head>
 
<body>
    <h1>フレームＡ</h1>
    <button type="button" id="button01"
            onClick="displayValue01()">フレームBのテキスト表示</button>
</body>
</html>

フレームＢのソース（test03b.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja">
 
<head>
    <title>フレームＢ</title>
    <script type="text/javascript">
    <!--
    function displayButton01(){
        alert('フレームAのbutton01：' +
            parent.frm_a.document.getElementById("button01").innerHTML);
        }
    // -->
   </script>
</head>
 
<body>
    <hr />
    <h1>フレームＢ</h1>
    <form>
        <p><input type="button" value="フレームAのボタン名表示"
                  onClick="displayButton01()"></p>
        <p><input type="text" name="value01" value="あああああ"></p>
        <input type="hidden" name="value02" value="いいい">
    </form>
</body>
</html>

f:id:no14141:20131020173345j:plain f:id:no14141:20131020173416j:plain f:id:no14141:20131020173439j:plain