iframe 하위 페이지와 상위 페이지 간의 도메인 내 및 도메인 간 통신의 예-PHP 튜토리얼-php.cn

iframe 하위 페이지와 상위 페이지 간의 도메인 내 및 도메인 간 통신의 예

一个新手

풀어 주다： 2023-03-15 21:38:02

원래의

2554명이 탐색했습니다.

iframe 서브 페이지와 상위 페이지 간의 통신은 오랫동안 철저하게 연구되었습니다. 이 콘텐츠를 이전에 사용해 본 적이 없어서 오늘 갑자기 질문이 생겨서 시도해 보았습니다. Tencent 팀이 사용하는 도메인 간 통신 주어진 메신저.js의 소스 코드도 매우 간단하고 볼만한 가치가 있습니다. 공식 데모는 매우 포괄적입니다.

도메인 내 통신

상위 페이지

<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(同域)</title><meta charset="utf-8"><script type="text/javascript">
    function sayHello(){
        alert("iframeCommunication1.html");
    }    function say(){
        child1.window.sayHello();
        child1.window.document.getElementById("button_c").value = "the call is complete";
    }</script></head><body><h1>iframe子页面与父页面同域通信</h1>调用子页面child1.html中的sayHello()函数：<input type="button" id="button_p" name="hello" value="call" onclick="say()"><br><br><iframe src="child1.html" id="child1"></iframe></body></html>

로그인 후 복사

하위 페이지

<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(同域)</title><meta charset="utf-8"><script type="text/javascript">
    function sayHello(){
        alert("child.html");
    }    function say(){
        parent.sayHello();
        parent.window.document.getElementById("button_p").value = "the call is complete";
    }</script></head><body><p>调用父页面iframeCommunication1.html中的sayHello()函数：</p><input type="button" id="button_c" name="hello" value="call" onclick="say()"></body></html>

로그인 후 복사

도메인 간 통신

IE8+ 및 최신 브라우저의 경우 도메인 간 통신은 주로 html5에서 제공하는 postMessage API를 사용하여 도메인 간 통신을 수행합니다. postMessage의 기능은 프로그래머가 도메인에 걸쳐 두 개의 창/프레임 간에 데이터 정보를 보낼 수 있도록 하는 것입니다. 기본적으로 이는 도메인 간 AJAX와 비슷하지만 브라우저와 서버 간에 상호 작용하는 대신 두 클라이언트 간에 통신합니다.
구형 브라우저의 경우 메신저.js는 navigator 객체를 상위 창과 iframe 간에 공유하는 기능을 사용합니다. navigator 객체에 메시지 콜백 기능을 등록하여 정보 전달 및 공유를 구현합니다.
매우 간단한 예는 다음과 같습니다.

상위 페이지

<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(跨域)</title><meta charset="utf-8"><script src="js/messenger.js"></script></head><body><h1>iframe子页面与父页面跨域通信</h1>向子页面child2.html发送信息：<input type="button" id="button_p" value="call" onclick="sendMessage(&#39;child2&#39;)"><br><br>获取信息：<pre id="output">

로그인 후 복사

하위 페이지

<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(跨域)</title><meta charset="utf-8"><script src="js/messenger.js"></script></head><body><h1>child2</h1>向父页面iframeCommunication2.html发送信息：<br><input type="button" id="button_p" value="call" onclick="sendMessage(&#39;parent&#39;)"><br><br>获取信息：<pre id="output">

로그인 후 복사