解决IFRAME跨域刷新,跨域操作JS的权限问题的一种办法

问题:

主页面为:

页面1:http://www.a.com/page1.html

iframe另一个页面

页面2:http://www.b.com/page2.html

该两个页面不同域,因此 页面2 无法跨域对页面1的DOM及JS方法执行操作

解决方案:(以页面2刷新页面1为例)

step1:在页面1的同域 http://www.a.com/ 域下放置一个页面3 http://www.a.com/channel.html

step2:在页面2中加入如果代码:

1. <script type="text/javascript">
   
2. function reloadParent(){
   
3. document.write("<iframe src='http://www.a.com/channel.html' style='display:none'></iframe>");
   
4. }
   
5. </script>

复制代码

页面2 在 iframe channel.html 时完全可以加上不同的参数或hash

1. <iframe src='http://www.a.com/channel.html#refresh' style='display:none'></iframe>

复制代码

此时channel.html 就完全可以灵活的根据不同的参数或hash 对顶级页面处理不同相关的操作:

1. <script type="text/javascript">
   
2. top.location.reload();
   
3. </script>

复制代码

step3:在页面2触发reloadParent()方法就可以刷新页面1了

此時父窗口page1如果有函數test(),
page3可以使用parent.parent.test();來調用 以實現page2的跨域

同理,其它JS操作方法同上

另外补充各浏览器url长度的限制

浏览器	URL长度限制
IE浏览器	2048字节
chrome	8182字节
Firefox	65536字节
Safari	80000字节
Opera	190000字节
360极速浏览器	2118字节

================================================另外的补充
如果页面1 要操作它 iframe下的 页面2 如果再玩几层嵌套有点深
先搞定 同一个域名， 顶级页面 page1.html 和 channel.html 的通信

在 channel.html 页面定义相关的方法

1. 
   
2. var topWin = top;
   
3. // 定义方法让顶级窗口调用，接收顶级窗口信息
   
4. function getMessage(data) {
   
5.     alert("messageFormTopWin:" + data);
   
6. }
   
7. 
   
8. // 让顶级窗口知道哪个子页面在呼唤他
   
9. function sendMessage(data) {
   
10.     topWin.proxyWin = window;
    
11.     topWin.getMessage(data);
    
12. }

复制代码

在页面1 顶级窗口中定义相关方法

1. 
   
2. // 子窗口
   
3. var proxyWin = null;
   
4. function getMessage(data) {
   
5.     alert("messageFormProxyWin:"+data);
   
6.     sendMessage("top has receive data:"+data);
   
7. }
   
8. 
   
9. // 调用子窗口方法
   
10. function sendMessage(data) {
    
11.     if (null != proxyWin) {
    
12.         proxyWin.getMessage(data);
    
13.     }
    
14. }

复制代码

然后再来搞定channel.html 与 另一个域名下 page2.html的通信，我们可以利用 window.name ，在同浏览器窗口（标签页）中页面跳转时一直存在且值不变，而且值长度可以为2M(ie和firefox据说可以达到32M)
实验：在页面1 a.com/page1.html 设置 window.name=”xxx”, 然后 location.href=”http://b.com/page2.html”跳转到 page2.html 是可以读到 window.name 的值为 "xxx";

所以需要在 page2.html下同域下也放一个页面 channel_2.html ，让 channel.html 和 顶级窗口 page1.html 通信后记入到 window.name 中，然后跳转到  channel_2.html ，由channel_2.html 读取  window.name 来告诉 page2.html

顶一下，好帖