利用Ajax跨域加載的內容是位於work.js8.in域名下的helloworld.txt。我們需要在主頁面中設置document.domain為js8.in,然后主頁面添加一個iframe,src為域名work.js8.in下的一個url,在iframe頁面中同樣設置document.domain為js8.in,同時iframe中需要添加Ajax的函數,例如引入jQuery.js。
一,自己的頁面http://www.js8.in/mywork/crossdomain/index.html(域為www.js8.in)代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用document.domain+iframe實現Ajax跨子域</title>
</head>
<body>
<div id="ajax">跨域成功此處內容被替換</div>
<iframe src="http://work.js8.in/crossdomain/iframe.html" id="iframe" style="display:none;"></iframe>
<script type="text/javascript">
document.domain = 'js8.in';
function crossDomain(){
var iframe=document.getElementByIdx_x('iframe').contentWindow.$;
iframe.get("http://work.js8.in/crossdomain/helloworld.txt",function(data){
document.getElementByIdx_x("ajax").innerHTML=data;
});
}
</script>
</body>
</html>
二:另外個域下的文件,也就是iframe中src的文件http://work.js8.in/crossdomain/iframe.html(域為work.js8.in),代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用document.domain+iframe實現Ajax跨子域</title>
</head>
<script type="text/javascript" src="../public/jquery1.4.js"></script>
<script type="text/javascript">
document.domain = 'js8.in';
</script>
<body>
</body>
</html>
三:數據文件http://work.js8.in/crossdomain/helloworld.txt內容為
hello,world; From "work.js8.in";
點擊之前與之后的結果如下