ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript の親ページと子ページの対話スキルの概要_JavaScript スキル

JavaScript の親ページと子ページの対話スキルの概要_JavaScript スキル

WBOY
リリース: 2016-05-16 16:40:04
オリジナル
1197 人が閲覧しました

フレームはサブページを保存するために使用されます。サブページは iframe または Frameset のいずれかになります。 window オブジェクトはグローバル オブジェクトであり、ページ上のすべての関数とオブジェクトがそのスコープ内にあります。
1. Parent は親ウィンドウを表します。親ウィンドウに複数のレベルのネストがある場合、top は最上位の親ウィンドウを表します。
self はウィンドウ自体を表します。

if(self==top){//}判断窗口是否处于顶级 
if(self==parent){}//也可以
ログイン後にコピー

2.1. 親ページは子ページ要素にアクセスします。考え方としては、サブページの要素はすべて window.document オブジェクト内にあるので、最初に取得してからそれについて説明するのが簡単です。
フレームの name 属性を設定するのが最も便利な操作です。

など
<iframe name="test" src="child.html"></iframe>
ログイン後にコピー

child.html で ID が「menu」の要素を取得したい場合は、次のように記述できます:

window.frames["test"].document.getElementById('menu'); 
//由于所有的函数都存放在window对象里面,可去掉开头的window: 
frames["test"].document.getElementById('menu'); 
//在浏览器中,帧的name属性被默认等同于子页面的window对象,因此可以进一步简写: 
test.document.getElementById('menu');
ログイン後にコピー

2.2 親ページは子ページの関数またはオブジェクトにアクセスします。サブページの関数とオブジェクトはすべてそのウィンドウ オブジェクト内にあります。重要なのはオブジェクトを取得することです。

//假如child.html定义了showMesg函数,需要在父中调用,则这样写 
window.frames['test'].showMesg(); 
//简写形式 
test.showMesg(); 
//同理,对象也是如此访问 
alert(test.person);
ログイン後にコピー

2.3 書類を入手するその他の方法。
まず「document.getElementById()」または「document.getElementsByTagName()」を使用してドキュメントの下の要素としてフレームを取得し、次にそのプロパティ contentDocument/contentWindow にアクセスします (最初のプロパティはサポートされていません)。 by ie7-。2 番目のクロムはサポートされていません。

<iframe id="testId" src="child.html"></iframe> 
//====== 
var doc=document.getElementById('testId'); 
//或者 
var doc=document.getElementsByTagName('iframe')[0]; 
然后 
var winOrdoc=doc.contentDocument||doc.contentWindow;//二选一 
if(winOrdoc.document)winOrdoc=winOrdoc.document; 
winOrdoc.getElementById('menu'); 
//如果需要window对象,则这样写: 
if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;
ログイン後にコピー

3.1 サブページは親ページ要素にアクセスします。考え方は2.1と同じで、まず親ウィンドウのwindow.documentオブジェクト
を取得します。

parent.window.document.getElementById('parentMenu'); 
//简写 
parent.document.getElementById('parentMenu');
ログイン後にコピー

3.2、子ページは親ページの関数またはオブジェクトにアクセスします。考え方は2.2と同じで、まず親ウィンドウのウィンドウオブジェクトを取得します。

parent.parentFunction();
ログイン後にコピー

最後に、js の同一生成元ポリシーについて触れておきます。つまり、Web サイト A にある JS コードは、コードが Web サイト B からのものであっても、Web サイト B にあるコンテンツへのアクセスは許可されません。フレームが別の Web サイトのページである場合、上記の方法に従って相互にアクセスすると、ブラウザーは「許可がありません」エラーを表示するはずです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート