집 >웹 프론트엔드 >JS 튜토리얼 >실제 연습--웹페이지 간 데이터 전송을 위한 JS

실제 연습--웹페이지 간 데이터 전송을 위한 JS

php是最好的语言원래의: 2018-08-10 16:16:372770검색

1. HTML5 APIS에 window.postMessage API가 있다는 사실을 아는 사람은 거의 없을 것으로 추정됩니다. window.postMessagewindow.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。

2. 先创建一个index.html 文件。（在测试的的时候必须用服务器测试呀； file:// 这样地址的开头是错误的不准许访问发送（因为window.postMessage이 기능은 프로그래머가 도메인 간에 통신할 수 있도록 하는 것입니다. 두 개의 창/프레임 간에 데이터 정보를 보냅니다. 기본적으로 이는 도메인 간 AJAX와 비슷하지만 브라우저와 서버 간 상호 작용 대신 두 클라이언트 간에 통신합니다. window.postMessage가 어떻게 작동하는지 살펴보겠습니다. IE6 및 IE7을 제외한 모든 브라우저는 이 기능을 지원합니다.

2. 먼저 index.html 파일을 만듭니다. (테스트시 반드시 서버를 이용하여 테스트하셔야 합니다; file:// 주소의 시작 부분이 잘못되어 접근이 허용되지 않아 전송이 불가능합니다. (

window.postMessage

이 방법은 도메인 간이며 ajax와 유사하므로 매우 유사합니다.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     body,p{
        margin: 0px;
        padding: 0px;
     }
    </style>
</head>
<body>
    
    <script>
        //弹出一个新窗口
        var domain = &#39;http://localhost:8080/chenzhenhua/&#39;;
        var myPopup = window.open(domain+&#39;lister.html&#39;,&#39;myWindow&#39;);//打开另一个网址
        //  var array=["100","liyoubing","200"];
        var array=[{"姓名":"李友冰"},{"性别":"男"}]

        //周期性的发送消息
        setInterval(function(){
           //var message = &#39;Hello!  The time is: &#39; + (new Date().getTime());
          //  console.log(&#39;blog.local:  sending message:  &#39; + message);
             //array:发送消息de数据,domain: 是url;
            myPopup.postMessage(array,domain);
        },6000);
    </script>
</body>
</html>

3. 코드 lister.html 파일을 생성하는 방법은 다음과 같습니다. 실제 연습--웹페이지 간 데이터 전송을 위한 JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
         //监听消息反馈
       window.addEventListener(&#39;message&#39;,function(event) {
            console.log(event);
            if(event.origin !== &#39;http://localhost:8080&#39;) return;
            console.log(&#39;received response:  &#39;,event.data);

        },false);
    </script>
</body>
</html>

4. 결과는 다음과 같습니다.

실제 연습--웹페이지 간 데이터 전송을 위한 JS

관련 기사