두 창 간의 통신

1.localstorage

한 창은localStorage를 업데이트하고, 다른 창은window 대상의 "storage"이벤트를 감청하여 통신을 합니다.(localStorage는 프로토콜, 도메인 이름, 포트 일치 등 동원 창이 필요합니다)

//         
localStorage.setItem('aaa', (Math.random()*10).toString())

//       storage  
window.addEventListener("storage", function (e) {
  console.log(e)
  console.log(e.newValue)
})

2.WebSocket

모든 WebSocket은 같은 서버 주소를 감청하고send를 이용하여 메시지를 보내며onmessage를 이용하여 메시지의 변화를 얻는다. 창뿐만 아니라 브라우저까지 호환성이 가장 좋고 서버 자원을 소모해야 한다.

var ws = new WebSocket("ws://localhost:3000/")
ws.onopen = function (event) {
  //               ，          
  ws.send({now : Date.now()}); //          
};
ws.onmessage = function (event) {
  //     
  console.log(event.data);
}

window.postMessage()

window.postMessage () 방법은 윈도 대상 간의 크로스 통신을 안전하게 실현할 수 있습니다.예를 들어 한 페이지와 그것이 생성한 팝업 창 사이, 또는 페이지와 끼워 넣은 iframe 사이.
일반적으로 서로 다른 페이지의 스크립트는 서로 접근할 수 있으며, 그것들이 원본에서 나온 페이지만 같은 프로토콜을 공유할 때, 포트 번호와 호스트 ('동원 정책' 이라고도 부른다.window.postMessage () 는 이 제한을 안전하게 피하기 위해 제어된 메커니즘을 제공합니다.
일반적으로 한 창은 다른 창에 대한 인용을 얻을 수 있다. (예를 들어 targetWindow=window. opener를 통해) 그리고 targetWindow를 사용할 수 있다.postMessage()가 MessageEvent를 보냅니다.수신 창은 필요에 따라 이 사건을 처리할 수 있습니다.윈도우에 전달합니다.postMessage () 의 매개 변수가 이벤트 대상을 통해 수신 창에 노출됨

postMessage 프로그램

var receiver = document.getElementById('receiver').contentWindow;//origin  
var btn = document.getElementById('send');//    
btn.addEventListener('click', function (e) {
    e.preventDefault();
    var val = document.getElementById('text').value;
    receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");//      http://res.42du.cn  
});

매개변수 및 구문

targetWindow.postMessage(message, targetOrigin, [transfer]);
//message:     
//targetOrigin:argetOrigin           ，            ，      “*” URI。 *            ，     ，            URI。
//transfer

수신단

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.42du.cn")
    return;
}
//event       ，   origin，data source。event.data        ；event.origin  postMessage     ，    ，     ；event.source              ;                             。

전체 코드

송신 프로그램


<html>
<head>
    <meta charset="utf-8">
    <title>42   -window.postMessage()      title>
head>
<body>
<div>
    <input id="text" type="text" value="42   " />
    <button id="send" >    button>
div>
<iframe id="receiver" src="http://res.42du.cn/static/html/receiver.html" width="500" height="60">
    <p>        IFrame。p>
iframe>
<script>
    window.onload = function() {
        var receiver = document.getElementById('receiver').contentWindow;
        var btn = document.getElementById('send');
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            var val = document.getElementById('text').value;
            receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
        });
    }
script>
body>
html>

수신 프로그램


<html>
<head>
    <meta charset="utf-8">
    <title>42   - www.42du.cn    title>
head>
<body>
<div id="message">
    Hello World!
div>
<script>
    window.onload = function() {
        var messageEle = document.getElementById('message');
        window.addEventListener('message', function (e) {
            alert(e.origin);
            if (e.origin !== "http://www.42du.cn") {
                return;
            }
            messageEle.innerHTML = " "+ e.origin +"    ： " + e.data;
        });
    }
script>
body>
html>

4. window를 사용합니다.name

브라우저 창에 window가 있습니다.name 속성, 이 속성의 특징은 같은 창에서만 같은 원본이든 다른 웹 페이지의 window든 상관없다는 것입니다.name 속성은 모두 공유됩니다.장점:window.name 데이터 용량이 크고 (세션 식별자에 비해) 단점이 있습니다. (1) 같은 창이어야 합니다.(2) 윈도우를 수신해야 합니다.name 속성의 변화로 웹 성능에 영향을 미칩니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

두 창 간의 통신

두 창 간의 통신

1.localstorage

2.WebSocket

window.postMessage()

postMessage 프로그램

매개변수 및 구문

수신단

전체 코드

4. window를 사용합니다.name

좋은 웹페이지 즐겨찾기