本文探讨在IE8浏览器中通过JavaScript动态创建script标签远程加载jQuery时，首次访问正常但刷新页面后出现异常的现象。通过对比Firefox的表现，指出这是IE特定的缓存或执行机制问题。文章进一步提供基于window.name和iframe的跨域数据获取方案，演示如何利用隐藏的iframe实现不同域名间的安全数据传递，并包含完整的测试代码示例。
IE8动态加载远程JS刷新失效问题
代码实现如下：
function include(path){
var a=document.createElement("script");
a.type = "text/javascript";
a.src=path;
var head=document.getElementsByTagName("head")[0];
head.appendChild(a);
}
include("http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js")在IE8浏览器中执行上述脚本，首次访问时在地址栏按回车可以正常调用jQuery对象和方法。然而，执行页面刷新操作后会出现异常，此时无论怎样操作，必须再次在地址栏按回车键才能恢复正常。
Firefox浏览器下此问题不存在。以下提供一个基于window.name技术的HTML测试脚本，供读者验证：
基于window.name的跨域数据获取方案
代码实现如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo:跨域</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function include(path){
var a=document.createElement("script");
a.type = "text/javascript";
a.src=path;
//if (a.readStatus == 200) {
var head=document.getElementsByTagName("head")[0];
head.appendChild(a);
//}
}
include("http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js")
</script>
<script>
$(function(){
function sendData(url, callback){
if(!url || typeof url !== 'string'){
return;
}
url += (url.indexOf('?') > 0 ? '&' : '?') + 'windowname=true';
var frame = $('<iframe style="display:none;"></iframe>').appendTo("body");
var state = 0;
var clear = function(){
try{
frame[0].contentWindow.document.write('');//清空iframe的内容
frame[0].contentWindow.close();//避免iframe内存泄漏
frame.remove();//删除iframe
}catch(e){}
};
var getData = function(){
try{
var data = frame[0].contentWindow.name;
}catch(e){}
clear();
if(callback && typeof callback === 'function'){
callback(data);
}
};
frame.bind('load', function(){
if(state === 1){
getData();
} else if(state === 0){
state = 1;
frame[0].contentWindow.location = "none.html";
}
});
frame[0].src = url;
}
//应用:
var testurl = 'http://www.jb51.cn/test.html';
$("button").click(function(){
sendData( testurl ,function(result){
var fishDiv = $("#oldFish");
fishDiv.html( "你获取的数据是："+result );
})
})
})
</script>
</head>
<body>
<button>远程加载数据</button>
<div id="oldFish"></div>
<p style="font-size:12px;">Dev By <a href="http://www.jb51.cn" >素材下载</a> & 桦</p>
<p style="font-size:12px;">参考：<a href="https://www.jb51.net" >本站</a></p>
</body>
</html>