首先一点，这里的跨域不是类似 aaa.test.com 和 bbb.test.com的二级域名跨域，这种跨域的问题好像有很多人研究过了，而且也实现了。我这里说的跨域是像www.aaa.com和www.bbb.com这样的跨域。
再说一下我研究的这个跨域所要实现的功能吧，我有自己的域名www.aaa.com，我的域名下有一个图片列表页面，这个页面需要在其他域名，例如www.bbb.com的页面上显示，说到这里，可能有些朋友会说，提供一段代码，在www.bbb.com上iframe一下，不就结了吗，也牵扯不到跨域的问题，但是有一点，如果是ifame的方式在bbb.com上显示的话，这个iframe窗体的高度不是能够随着我的图片页面的高度变化的，也就是说，如果我提供的图片页面很长，那么就会在bbb.com的页面上显示滚动条，这样的话，页面会变得很难看，而这是我所希望的。
好了，说一下我的实现方式，我采用JS直接创建层的方式在bbb.com的show.html页面上直接创建我所需要的数据容器层，
<div id=”Data-Container”></div>
然后再把获取数据的链接get.asp附加到页面上<head>元素里面，利用OBJ.appendChild(obj),
<head>
<script src=”http://www.aaa.com/…/get.asp” id=”Data-Handler”></script>
</head>
在链接页面获取到数据
var content = ‘this is test content’; 以后，
在该页面的底部执行预先定义好的赋值函数
function SetData(){
document.getElementById(‘Data-Container’).innerHTML = content;
}
这样，原本在aaa.com域名下的数据就巧妙的显示到了bbb.com域名下的页面里，关键一点是，层Data-Container的高度会随着获取到数据的大小而自动调整大小，这样，show.html的高度也会自动调整了，就不会出现难看的上下滚动条了。
当然，这只是一个简单的工作原理，其中还有好多需要注意的地方，比如更复杂的回传参数，更新数据等，剩下的下次再写吧。
1 Trackback