最近在跨域問題的問題中,查找了一些資料。實現方法有很多。
PPT文檔:http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier 裏面詳細介紹了基本的實現方法。
下面轉載easyXDM以及JSONP 的方法:
內容來自:http://blog.sina.com.cn/s/blog_61b7b4e90100xcwz.html
最近在做項目的時候遇到很多跨域的問題。說下我的解決方案:
1.JSONP單純獲取數據的話,並且希望能實現不調用動態程序的情況下,可以考慮使用JSONP來解決。
具體原理就是讓瀏覽器通過script的src屬性來動態調取。
代碼:
functionloadContent(content) {
s.src="http://test.com/test.js";
document.body.appendChild(s);
}頁面中給onclick()綁定此函數即可。而在動態調用的JS文件中,返回如下格式的數據:
functionname(data); 其中functionname爲原來已經加載的函數(本域)類似於: function functionname(data){ document.getElementByIdx_x('container').innerHTML=data; } 這樣就在引用近數據後,執行了對應的數據。 優點:可以不使用動態程序,簡單易用。 缺點:事實上使用的是GET方式,其保密性以及安全性甚至傳輸數據大小都是問題,並且此方式解決了跨域問題,所以給跨站攻擊帶來了方便,不建議用在提交數據處。 2.easyXDM 遇到的另外一個問題是,跨域調節父框架的高度。最終找到的一個方案是easyXDM. easyXDM是一個較爲成熟的js跨域解決方案,並且其對各種瀏覽器都有不同的解決方案,兼容性較好,在ie6,7中使用的是flash,其他瀏覽器使用的是:PostMessageTransport.網站:http://easyxdm.net/wp/ easyXDM的使用使用了3個頁面:當前查看頁面,中間頁面,iframe嵌套頁面。 我這裏直接上代碼: 查看頁面(domain1.com)index.html <html> <head> <script src="easyXDM.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var transport = new easyXDM.Socket( { remote: "http://domain2/middle.html", container: "embedded", onMessage: function (message, origin) { this.container.getElementsByTagName_r("iframe")[0].style.height = message; } } ); </script> </head> <body> <div id="embedded"></div> </body> 中間頁面(domain2.com)middle.html <html> <head> <title>Frame</title> <script type="text/javascript" src="easyXDM.js"> </script> <script type="text/javascript"> var iframe; var socket = new easyXDM.Socket({ swf: "easyxdm.swf", onReady: function(){ iframe = document.createElement_x("iframe"); iframe.frameBorder = 0; document.body.appendChild(iframe); iframe.src = "index.html"; }, onMessage: function(url, origin){