博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2009-05-19 09:01  linFen  阅读(2832)  评论(0编辑  收藏  举报

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