JavaScriptの親子ページ通信例を詳しく解説_JavaScriptスキル-jsチュートリアル-php.cn

JavaScriptの親子ページ通信例を詳しく解説_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:49:55

オリジナル

1520 人が閲覧しました

この記事の例では、JavaScriptの親子ページ通信の実装方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ドメイン www.abc.com のページに name 属性値が childFrame の iframe が含まれており、この iframe のドメインが static.abc.com である場合。次に、親ページのドメインを abc.com に設定し、子ページのドメインを abc.com に設定して、親子ページの通信を実現します (ここで、親子ページの概念について少し混乱しています)そしてクロスドメイン。

上記の方法を使わずに、親ページと子ページ間の相互アクセスを実現することもできます。

メソッドは次のとおりです: 親ページで window.frames[0] または window.frames["childFrame"] を使用します。返されるのは Window オブジェクトであり、次のように渡すことができます:

var childWindow = window.frames[0];
// 或者 window.frames["childFrame"] 或者直接childFrame 或者childFrame.window 
var childDoc = childWindow.contentDocument || childWindow.document;

ログイン後にコピー

childWindow を使用してサブページの定義を実行する関数にアクセスし、childDoc を使用してサブページの DOM ノードにアクセスします。

親ページにアクセスするために、子ページは親 (Window オブジェクト) を渡すことができます。ページがすでにトップレベルのページである場合、parent==self は true を返します。

if(parent != self) {
// 当前页面有父页面 
  // 调用父页面的函数 
  parent.parentFunc(); 
  var parentDoc = parent.contentDocument || parent.document; 
  // 访问父页面的DOM节点 
}

ログイン後にコピー

www.abc.com 親ページ:

document.domain = 'abc.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://static.abc.com/';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  var doc = ifr.contentDocument || ifr.contentWindow.document;
  // 在这里操纵子页面
  alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

ログイン後にコピー

www.static.abc.com サブページ:

コードをコピーコードは次のとおりです:

document.domain = 'abc.com';

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。