1,window.name
原理:
name 在浏览器环境中是一个全局/window对象的属性,且当在 iframe 中加载新页面时,name 的属性值依旧保持不变。
但 此时 name 属性仅对相同域名的 iframe 可访问 ,所以第二次加载时需要加载本地的文件(空文件也可),把name引到本地来使用。
当然iframe的name使用完后,应该把iframe删除(涉及动态创建iframe和删除iframe)。请看例子2。
本地端:
function sendData(){
var state = 0;
var $iframe = $("#iframeId");
$iframe.bind('load', function(){
if(state === 1){
var data = $(this)[0].contentWindow.name;//iframe的src已经转到同域,所以可以访问iframe的name了.即:实现了跨域.
$("#oldFish").html( "你获取的数据是:"+data );
}else if(state === 0){
state = 1;
$(this)[0].contentWindow.location = "none.html";//$(this)[0].contentWindow相当于iframe的window,再次触发iframe的onload事件
}
});
$iframe.attr("src","http://www.cssrain.cn/test.html");//第一次触发iframe的onload事件。
}
sendData();
远程访问端:
window.name = "CssRain";
源文件下载:
http://www.cssrain.cn/demo/windowname.rar
一个简单的插件:
jQuery.getWindowName = function(url,callback){
if(!url || typeof url !== 'string'){return;}
url += (url.indexOf('?') > 0 ? '&' : '?') + 'remote='+(+new Date());
var frame = $('<iframe style="display:none;"></iframe>').appendTo("body");
var state = 0;
frame.load(function(){
if(state === 0){
state = 1;
frame[0].contentWindow.location = "none.html";
}else{
var data = frame[0].contentWindow.name;
frame.remove();
if(callback && typeof callback === 'function'){
callback(data);
}
}
}).attr("src",url);
};
调用方法:
$.getWindowName("http://cssrain.cn/test.html",function(data){
alert(data);
});
2,JSONP
function jsonp(url,callback,name, query)
{
if (url.indexOf("?") > -1)
url += "&jsonp="
else
url += "?jsonp="
url += name + "&";
if (query)
url += encodeURIComponent(query) + "&";
url += new Date().getTime().toString(); // prevent caching
var script = document.createElement("script");
script.setAttribute("src",url);
script.setAttribute("type","text/javascript");
document.body.appendChild(script);
}
function callbackFunction(Result)
{
alert(Result.x + " " + Result.y) ;
}
调用jsonp函数,去服务器请求,地址此时是这样:
http://someserver.com/mypage.aspx?jsonp=callbackFunction
如果服务器想返回一个:
{ "x": 10, "y": 15} 这样的数据。
那么可以利用后台语言获取jsonp的值,然后拼接返回,代码如下:
string Callback = Request.QueryString["jsonp"];
Response.Write(Callback + "( {\"x\":10 , \"y\":15} );");
前台接收的数据是:
callbackFunction( { "x": 10, "y": 15} );
这个数据正好执行了 先前 定义好的函数:
function callbackFunction(Result)
{
alert(Result.x + " " + Result.y) ;
}
关于jsonp的文章:
http://www.west-wind.com/Weblog/posts/107136.aspx
本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1341