js跨域

概念

跨域，是指瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript實施的安全限制。

http://www.nihao.com/index.html 呼叫 http://www.nihao.com/server.php （非跨域）

http://www.nihao.com/index.html 呼叫 http://www.nihaoma.com/server.php （主域名不同:nihao/nihaoma，跨域）

http://abc.nihao.com/index.html 呼叫 http://def.nihao.com/server.php （子域名不同:abc/def，跨域）

http://www.nihao.com:8080/index.html 呼叫 http://www.nihao.com:8081/server.php （埠不同:8080/8081，跨域）

http://www.nihao.com/index.html 呼叫 https://www.nihao.com/server.php （協議不同:http/https，跨域）
localhost   呼叫 127.0.0.1 跨域

跨域：協議、域名、埠其中任意一個不同。
同源：協議、域名、埠均相同，

案列

//a.html a頁面下的程式碼
var param = {
    act_name:"comfirmAddr",
    search_name: $("#search_input").val(),
    data:selAddList
}
var json = JSON.stringify(param);
console.log(json);
//第二個引數是目標域：http://www.nihao.com/a.html
window.opener.postMessage(json,'*');
window.close();

//b.html b頁面下的程式碼 b頁面接受a頁面傳送過來的資訊
HTML:
<el-button onclick="goToB" >開啟b.html的頁面</el-button>
JavaScript：
function goToB(){
	 var  url = "http://www.ifine.com/b.html"
     window.open(url, "開啟b.html的頁面", "height=" + screen.height + ",width=" + screen.width + ",menubar=no,scrollbars=no,resizable=yes,toolbar=no,status=no,left=100,top=100") ;          
}
window.addEventListener('message', receieveMessage, false);
function receieveMessage(event)
{
    try
    {
        var param = event.data;
        var json = window.JSON.parse(param);
        var act_name = json.act_name;
        if(act_name == 'comfirmAddr')
        {
            vueObject.addrKey = json.search_name;
            var v_data = json.data;
            vueObject.addresArr = v_data;
        }
    }
    catch(e)
    {
        alert("異常名字："+e.name);
        alert("異常號："+e.number);
        alert("異常的描述資訊："+e.description);
        alert("異常的錯誤資訊："+e.message);
    }
}

事件監聽

window.addEventListener(type, function, true/false);
type：事件的型別（如“click”或“mousedown”或“message”或“resize”）。
function：事件觸發後呼叫的函式。
true/false：true：先捕獲 、false：先冒泡

移除監聽事件

window.removeEventListener(“click”, function);