您的位置:首页 > Web前端 > JQuery

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

2009-12-03 13:59 447 查看
// google_ad_client = "pub-0545040803774316";
/* 120x90, 创建于 08-11-26 */
google_ad_slot = "8187547317";
google_ad_width = 120;
google_ad_height = 90;
// ]]>

// google_protectAndRun("render_ads.js::google_render_ad", google_handleError, google_render_ad);
// ]]>

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: