javascript 부모-자식 페이지 통신 예제_javascript 기술에 대한 자세한 설명

이 기사의 예에서는 JavaScript 상위-하위 페이지 통신 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

www.abc.com 도메인의 페이지에 이름 속성 값이 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; 

subpage 정의를 실행하는 함수에 접근하려면 childWindow를 사용하고, 서브페이지의 DOM 노드에 접근하려면 childDoc를 사용하세요.

상위 페이지에 액세스하려면 하위 페이지가 상위(창 개체)를 전달할 수 있습니다. 페이지가 이미 최상위 페이지인 경우 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 하위 페이지:

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.