window.name和JSONP的跨域实现(jQuery)

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