javascript通过iframe加载同源代理页面实现顶级域跨域操作
由于浏览器安全问题,通过域a打开域名b的页面,这2个页面是不能互相操作对方的DOM对象的。(如果顶级域名相同,可以在2个需要互相操作的页面中都执行document.domain='顶级域名'语句,这样2个页面就可以相互操作)
今天在csdn上看到了一个办法,思路如下
A域有2个页面a,b
B域有一个页面c
a使用window.open打开c,由于不同源,所以c通过opener获取到a的引用还是无法操作a页面的dom对象。
此时可以在c页面放置一个iframe,然后通过iframe加载A域的b页面(代理作用),并传递需要更新a页面dom对象的内容参数(可以为get/post传递,详细看下面的示例)
在A域的b代理页面中,通过parent得到c的引用,parent.opener得到a的引用,由于parent.opener指向A域,和b页面同源,就可以通过parent.opener操作a页面了。
测试源代码如下,假设A域名为h.guilinjiaoyu.cn,B域名为root.w3dev.cn,在IE7-8,chrome25,firefox12测试通过
h.guilinjiaoyu.cn测试页面test.asp源代码
h.guilinjiaoyu.cn/test.asp <script> function setInputValue(v){//提供给同域名下的代理页面调用的回调函数 document.getElementById('txt').value=v; } </script> <input type="button" value="打开跨域页面root.w3dev.cn/a.html" onclick="window.open('http://root.w3dev.cn/a.html')"/><br/>数据data:<input type="text" id="txt" style="width:400px"/>
h.guilinjiaoyu.cn代理页面agent.asp源代码
h.guilinjiaoyu.cn/agent.asp <script> //parent得到跨域页面root.w3dev.cn/a.html的引用 //parent.opener得到同一个域名下的h.guilinjiaoyu.cn/test.asp的引用 //2者结合使用没有报跨域,而parent.opener是同一个域下的,所以就可以互相操作了 parent.opener.setInputValue("<%=request("data")%>");//调用同一个域名下的页面回调 //上面的代码即使不用回调,由于在同一个域名下,也可以操作test.asp页面上的dom对象,如下 //parent.opener.document.getElementById('txt').value="<%=request("data")%>";//这样也是可以的 parent.close() </script>
root.w3dev.cn被打开的跨域页面a.html源代码
root.w3dev.cn/a.html <script> function doPost(){//这个过程也可以直接在页面上直接放置一个隐藏的表单来实现,不用动态创建 var frm=document.createElement('form'); frm.method='post' frm.target='ifrAgent'//提交到iframe中 frm.action='http://h.guilinjiaoyu.cn/agent.asp' var input=document.createElement('input'); input.type='hidden'; input.name='data'; input.value='post_from_root_coding123_net_dc'+new Date().getTime() frm.appendChild(input); document.body.appendChild(frm); frm.submit(); } function setCrossDomainByAgent(){ document.getElementById('ifrAgent').src='http://h.guilinjiaoyu.cn/agent.asp?data=get_from_root_coding123_net_dc'+new Date().getTime() //如果要传递大量的内容,还可以通过表单来提交,数据量不大可以直接按照上面的get请求即可。。。 //doPost() } </script> <input type="button" value="通过代理iframe操作跨域的页面test.asp" onclick="setCrossDomainByAgent()"/> <!--代理iframe,实际应用时可以增加style="display:none" 隐藏起来--> <iframe id="ifrAgent" name="ifrAgent" src="about:blank"></iframe>
此方法也适用于父页放置的iframe加载跨顶级域页面,如何从iframe跨域的页面更新父页,测试代码如下,只做了些许改动,效果如下
h.guilinjiaoyu.cn测试页面test.asp源代码
h.guilinjiaoyu.cn/test.asp <script> function setInputValue(v){//提供给同域名下的代理页面调用的回调函数 document.getElementById('txt').value=v; } </script> 数据data:<input type="text" id="txt" style="width:400px"/> <br/> <iframe src='http://root.w3dev.cn/a.html' width="500" height="300" frameborder="1" scrolling="no"></iframe>
h.guilinjiaoyu.cn代理页面agent.asp源代码
h.guilinjiaoyu.cn/agent.asp <script> //parent得到跨域页面root.w3dev.cn/a.html的引用 //parent.parent得到同一个域名下的h.guilinjiaoyu.cn/test.asp的引用 //2者结合使用没有报跨域,而parent.opener是同一个域下的,所以就可以互相操作了 parent.parent.setInputValue("<%=request("data")%>");//调用同一个域名下的页面回调 //上面的代码即使不用回调,由于在同一个域名下,也可以操作test.asp页面上的dom对象,如下 //parent.opener.document.getElementById('txt').value="<%=request("data")%>";//这样也是可以的 </script>
root.w3dev.cn被打开的跨域页面a.html源代码不需要改动
相关文章
iframe和父页,window.open打开页面之间的引用
加支付宝好友偷能量挖...
原创文章,转载请注明出处:javascript通过iframe加载同源代理页面实现顶级域跨域操作