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