jQueryでの子ウィンドウと親ウィンドウの操作方法の簡単な分析

インターネットの発展に伴い、Web ページはユーザー エクスペリエンスにますます注目するようになり、優れた JavaScript ライブラリである jQuery はフロントエンド開発に大きな利便性をもたらします。 Webページでは子ウィンドウと親ウィンドウのやり取りがよく使われますが、jQueryの子ウィンドウと親ウィンドウのメソッドを紹介します。

1. サブウィンドウの操作

1. サブウィンドウを開く

サブウィンドウを開くときは、通常、window.open() を使用します。それぞれ 4 つのパラメータ:

window.open(URL,name,features,replace);

このうち、URL はサブウィンドウのアドレス、name は新しいウィンドウを開くときに指定できるサブウィンドウの名前、features はオプションの文字列です。パラメータでは、ウィンドウのサイズ、位置、ツールバーの有無など、ウィンドウのプロパティを指定します。replace は、URL を履歴に追加するかどうかを指定します。

サンプル コード:

window.open("child.html","childWindow","height=200,width=200");

2. 子ウィンドウを閉じる

子ウィンドウでは、window.close() メソッドを使用して現在のウィンドウを閉じることができます。

サンプルコード:

<button onclick="window.close()">关闭当前窗口</button>

3. 子ウィンドウで親ウィンドウのメソッドを呼び出す

子ウィンドウでは、window を通じて親ウィンドウのオブジェクトを取得できます。オープナーを作成し、そのメソッドを呼び出します。

サンプルコード:

親ウィンドウ:

function showMessage(message){
    alert(message);
}

子ウィンドウ:

window.opener.showMessage("Hello,world!");

2. 親ウィンドウの操作

1.子 Window オブジェクト

親ウィンドウでは、window.open() メソッドによって返される window オブジェクトを通じて、開いている子 Window オブジェクトを取得できます。

サンプルコード:

var childWindow = window.open("child.html","childWindow","height=200,width=200");

2. 親ウィンドウで子ウィンドウのメソッドを呼び出す

親ウィンドウで、子ウィンドウのメソッドを呼び出すことができます。開いた。

サンプルコード:

親ウィンドウ:

function changeColor(color){
    childWindow.document.body.style.backgroundColor = color;
}

子ウィンドウ:

<button onclick="window.opener.changeColor(&#39;red&#39;)">变红色</button>

3. 親ウィンドウで子ウィンドウのデータを取得

親ウィンドウでは、子ウィンドウのウィンドウオブジェクトを通じて子ウィンドウのデータを取得できます。

サンプル コード:

親ウィンドウ:

var childWindow = window.open("child.html","childWindow","height=200,width=200");

setTimeout(function(){
    var childData = childWindow.document.getElementById("data").innerHTML;
    alert(childData);
},2000);

子ウィンドウ:

<div id="data">子窗口数据</div>

概要:

上記の導入により、次のことが可能になります。 jQuery の子ウィンドウと親ウィンドウのメソッドは非常に単純ですが、Web ページ内の子ウィンドウと親ウィンドウの間の対話を実現し、ユーザー エクスペリエンスにさらなる可能性を提供することがわかりました。実際のプロジェクトでは、子ウィンドウと親ウィンドウの間の対話が必要な場合、開発者は上記の方法を使用してそれを実現できます。

以上がjQueryでの子ウィンドウと親ウィンドウの操作方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。