人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript 親ウィンドウから子ウィンドウへ値を渡し、子ウィンドウでは渡された値を元にHTMLソースを変更する方法を教えてください。

子ウィンドウの変更したいソースは以下の通り
<a href=”#” onclick=”opener.変更したい値1.変更したい値2.value=’link’>リンク</a>

●質問者: peppon
●カテゴリ:コンピュータ
✍キーワード:HTML JavaScript ウィンドウ ソース リンク
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● rokichan
●70ポイント

http://www.tohoho-web.com/js/document.htm

ドキュメント(Document)

ドキュメントオブジェクトを使用すれば可能だと思います。


以下、簡単な例です。


<html>

<head>

<script type=”text/javascript”>

// -->

</script>

</head>

<body>

<script type=”text/javascript”>

<!--

document.open();

test = ’<a href=”#” onclick=”opener.’

+ opener.F1.formName.value

+ ’.’

+ opener.F1.itemName.value

+ ’.value=¥’link¥’”>リンク</a>’;

document.write(test);

document.close();

// -->

</script>

</body>

</html>


親ウィンドウにF1というフォームを用意し、

その中にformName、itemNameがあれば使用可能です。

◎質問者からの返答

親ウィンドウから子ウィンドウへはリンクで値を渡すことは出来ませんか。 下記で親ウィンドウから子ウィンドウを作成しています。 値の渡し方から教えてください。


2 ● rokichan
●70ポイント

http://www.tohoho-web.com/js/index.htm

とほほのJavaScriptリファレンス

私の記憶の範囲で回答します。


親から子へ値を渡すことは可能なのですが、

親は子がいつ文章をロードし終わったかは親は直接知ることが出来ないので、

子が親に知らせる以外に方法はありません。


つまり、値を受け取るための変数を子が用意できていない時があり(ロード中の時)、

エラーになる可能性が非常に高いです。

(すでに開かれている(ロードが終わっている)子なら話は違いますが)


では、子のロードが終わっている場合とロード中場合の話を書きます。


1、子のロードが終わっている場合

window.open()は戻り値として開いたWindowオブジェクトを返します。

つまり、そのオブジェクトを保持しておけば親から子へ値を渡すことは可能です。


2、子のロード中の場合

子のbodyタグのonLoadイベントを使用して親のJavaScriptを呼び出す。

または、私の先ほどの回答のように親の値を子が取りに行く。

という方法で値を渡す(取得する?)ことが可能です。


Windowオブジェクトの使用法については先ほどのURL先に詳しく載っているので割愛します。


では、最後に前者パターンの簡単な例を


oya.html

<html>

<head>

<script type=”text/javascript”>

<!--

var win //子Windowオブジェクト

function openWindow() {

win = window.open(’ko.html’,’’,’’);

}

function setValue(value1) {

win.F1.text1.value=value1;

}

// -->

</script>

</head>

<body>

<a href=”javascript:openWindow()”>開く</a>

<a href=”javascript:setValue(’テスト’)”>書き換える</a>

</body>

</html>


ko.html

<html>

<head>

</head>

<body>

<form name=”F1”>

<input type=”text” name=”text1”/>

</form>

</body>

</html>

◎質問者からの返答

ありがとうございます

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ