201507152326_《Javascript實現跨域有4種方法——介紹jsonp和html5方法》

標籤：

一. jsonp方法

1. 原理

在js中，我們直接用XMLHttpRequest請求不同域上的資料時，是不可以的。但是，在頁面上引入不同域上的js指令檔卻是可以的。

2. 格式

<script>

　　function doSomething(jsondata) {

　　　　//todo

};

</script>

<script>http://example.com/data.php?callback=doSomething</script>

 

二. 使用HTML5中新引進的window.postMessage方法來跨域傳送資料

1. 擷取window對象。 例如：var winObj = element.contentWindow;

2. 格式

//a.html

<script>

function onload() {

　　var iframe = document.getElementById(‘iframe‘);

     var winObj = iframe .contentWindow;

　　winObj .postMessage(‘哈哈，我是來自頁面a的訊息‘,‘*‘);

}

</script>

<iframe>id = "iframe" src = "http://www.test.com/b.html"  onload="onload()"</iframe>

 

//b.html

<script>

　　window.onmessage = function(e) {

　　　　e = e || event;

　　　　alert(e.data);  // postMessage()方法儲存在了data裡了

}

</script>

 

201507152326_《Javascript實現跨域有4種方法——介紹jsonp和html5方法》