关于脚本回调
2010-10-24 14:11 BlueDream 阅读(1316) 评论(2) 编辑 收藏 举报jsonP目前被用来作为跨域的首选方案.即用动态创建的script标签去回调后端脚本,然后获取返回值并调用回调函数。但这里面有两个比较遗憾的事情:
- 前端需要和后端提前定义好接口,而且定义接口后,如果前端回调函数要改变名字,那么后端也需要变。(比如串行化,一个接口调用不同的回调函数,那么就更麻烦了)。
- 无法捕获错误信息。
为了处理这两点。从好奇和emu那边看到了一个比较好的解决方案。转载记录一下
var callbackJS = function () {
var ua = navigator.userAgent;
if (/MSIE/.test(ua)) {
return function (param) {
charset = param.charset || 'gb2312'
var frag = document.createDocumentFragment(), script = frag.createElement('script');
script.charset = charset;
frag[param.name] = function () {
param.callback && param.callback.apply(null, arguments);
frag = script = script.onreadystatechange = frag[param.name] = null;
};
script.onreadystatechange = function () {
if (script.readyState == 'loaded') {
param.errorcallback && param.errorcallback();
frag = script = script.onreadystatechange = frag[param.name] = null;
}
};
script.src = param.url;
frag.appendChild(script);
};
} else {
return function (param) {
charset = param.charset || 'gb2312'
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.callback = function () {
param.callback && param.callback.apply(null, arguments);
iframe.callback = iframe.errorcallback = null;
iframe.src = 'about:blank', iframe.parentNode.removeChild(iframe), iframe = null;
};
iframe.errorcallback = function () {
param.errorcallback && param.errorcallback();
iframe.callback = iframe.errorcallback = null;
iframe.src = 'about:blank', iframe.parentNode.removeChild(iframe), iframe = null;
};
try {
if (/KHTML/.test(ua)) iframe.src = 'block.htm'; //404可以
iframe.onload = function () {
iframe.onload = null;
//iframe.src="javascript:\"<scrip"+"t>function " + param.name + "(){frameElement.callback.apply(null, arguments)};<\/scrip"+"t><scrip"+"t src='"+param.url+"'><\/scrip"+"t><scrip"+"t>setTimeout('frameElement.errorcallback()',0)<\/scrip"+"t>\"";
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(
'<script type="text\/javascript">function ' + param.name + '() { frameElement.callback.apply(null, arguments); }<\/script>'
+ '<script type="text\/javascript" src="' + param.url + '" charset="' + charset + '"><\/script>'
+ '<script type="text\/javascript">window.setTimeout("try { frameElement.errorcallback(); } catch (exp) {}", 1)<\/script>'
);
iframe.contentWindow.document.close();
};
document.body.insertBefore(iframe, document.body.firstChild);
} catch (exp) {}
};
}
}();
var ua = navigator.userAgent;
if (/MSIE/.test(ua)) {
return function (param) {
charset = param.charset || 'gb2312'
var frag = document.createDocumentFragment(), script = frag.createElement('script');
script.charset = charset;
frag[param.name] = function () {
param.callback && param.callback.apply(null, arguments);
frag = script = script.onreadystatechange = frag[param.name] = null;
};
script.onreadystatechange = function () {
if (script.readyState == 'loaded') {
param.errorcallback && param.errorcallback();
frag = script = script.onreadystatechange = frag[param.name] = null;
}
};
script.src = param.url;
frag.appendChild(script);
};
} else {
return function (param) {
charset = param.charset || 'gb2312'
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.callback = function () {
param.callback && param.callback.apply(null, arguments);
iframe.callback = iframe.errorcallback = null;
iframe.src = 'about:blank', iframe.parentNode.removeChild(iframe), iframe = null;
};
iframe.errorcallback = function () {
param.errorcallback && param.errorcallback();
iframe.callback = iframe.errorcallback = null;
iframe.src = 'about:blank', iframe.parentNode.removeChild(iframe), iframe = null;
};
try {
if (/KHTML/.test(ua)) iframe.src = 'block.htm'; //404可以
iframe.onload = function () {
iframe.onload = null;
//iframe.src="javascript:\"<scrip"+"t>function " + param.name + "(){frameElement.callback.apply(null, arguments)};<\/scrip"+"t><scrip"+"t src='"+param.url+"'><\/scrip"+"t><scrip"+"t>setTimeout('frameElement.errorcallback()',0)<\/scrip"+"t>\"";
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(
'<script type="text\/javascript">function ' + param.name + '() { frameElement.callback.apply(null, arguments); }<\/script>'
+ '<script type="text\/javascript" src="' + param.url + '" charset="' + charset + '"><\/script>'
+ '<script type="text\/javascript">window.setTimeout("try { frameElement.errorcallback(); } catch (exp) {}", 1)<\/script>'
);
iframe.contentWindow.document.close();
};
document.body.insertBefore(iframe, document.body.firstChild);
} catch (exp) {}
};
}
}();
【使用方法】
callbackJS({
name: 'callback', // 和后端默认的接口
url: 'ajax.php', // 请求地址
callback: result, // 自定义的回调函数(这样就和后端无耦合了)
errorcallback: error // 错误回调函数
});
name: 'callback', // 和后端默认的接口
url: 'ajax.php', // 请求地址
callback: result, // 自定义的回调函数(这样就和后端无耦合了)
errorcallback: error // 错误回调函数
});
更详细的细节,请参考:
http://www.cnblogs.com/muxrwc/archive/2010/08/16/1800784.html