JS跨域--H5 postMessage

window.postMessage是html5中新增了一个新的跨域方法，可以用它向其他window对象发送消息，即使不同源也是可以发送消息。

兼容性：目前IE8+、FireFox、Chrome、Opera等浏览器都支持

postMessage的参数

参数	描述
data	是传递过来的message
source	发送消息的窗口对象
origin	发送消息窗口的源（协议+主机+端口号）

1.向iframe中传递数据

当前页面

<script>  
    function load() {
        var iframe = document.getElementById('iframe');
        //确保你使用的是iframe的contentWindow属性，而不是节点对象
        var win = iframe.contentWindow;
        //这里允许跨域地址我们不作限定，你可以自己定义
        win.postMessage('我是本地页面传递的文字','*');
    }
</script>
<iframe 
    id="iframe"     
    src="https://bannerl.github.io/html/domain/domain.html" 
    onload="load()">
</iframe>

目标页面

window.onmessage = function(e){
    e = e || event;
    var content = document.getElementById('content');
    content.innerHTML = e.data;
}

2.新窗口传递数据

必须window.open打开的新窗口才能通信，在新窗口打开的时候，我们需要指定打开页面的window.name。

当前窗口（a页面）

<button id="button">点我我更换传递信息</button>  
<script>  
    var host = 'http://localhost:8089';
    var newPageUrl = 'http://localhost:8089/b.html';
    var newPage = window.open(newPageUrl,"newPage");
    var message = '我是a页面传递的数据';

      //由于新页面加载完毕后，才能接收消息，所以这里用定时器发送消息，等到消息成功发送后关闭定时器
        var timer = setInterval(function(){
            newPage.postMessage(message,host);
    },200);

    //更新数据
    var btn = document.getElementById('button');
    btn.onclick = function() {
        message = '我是a页面传递的数据'+(new Date()).getTime();
        newPage.postMessage(message,host);
    }

    //监听消息反馈
    window.addEventListener('message',function(event) {
        if(event.data === "success"){
            clearInterval(timer);
        }
    },false);
    
</script>

新窗口（b页面）

window.onmessage = function(e) {
    e = e || event;
    if(event.origin !== 'http://localhost:8089') return;
    alert(e.data);
    //执行成功反馈消息
    event.source.postMessage('success',event.origin);
}

转自：https://www.jianshu.com/p/4a868ae61adb

js cookie使用方法以及跨域访问

cookie 是存储于访问者的计算机中的变量，常用属性包含五类：

Name ，Value ， Domain ， Path ， Expires ;

名称	描述
Name（名称）：	存储的key名。
Value（值）：	存储的value值。
Domain （域）：	指定关联的WEB服务器或域，比如 baidu.com。
Path（路径）：	指定与cookie关联的WEB页。
Expires（过期时间）：	指定cookie的生命期，具体是值是过期日期。

设置cookie：
setCookie('key1','你好');

function setCookie(c_name,value,expiredays) {
    var exdate=new Date();
     exdate.setDate(exdate.getDate()+expiredays);
     document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) + ";path=/;domain=" + document.domain;
 }

获取cookie：

getCookie(key1);

function getCookie(c_name){
    if (document.cookie.length>0){
        var c_start = document.cookie.indexOf(c_name + "=");
        if (c_start!=-1){
            c_start = c_start + c_name.length+1;
            var c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1){
                c_end=document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start,c_end));
        }
    }
    return "";
}

转自：https://www.cnblogs.com/front-boy/p/9377563.html