天空小小岛技术论坛

 找回密码
 注册
搜索
查看: 11645|回复: 1

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

[复制链接]
s.Bo 发表于 2011-12-31 18:10:46 | 显示全部楼层 |阅读模式
问题:

主页面为:

页面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. var topWin = top;
  2. // 定义方法让顶级窗口调用,接收顶级窗口信息
  3. function getMessage(data) {
  4.     alert("messageFormTopWin:" + data);
  5. }

  6. // 让顶级窗口知道哪个子页面在呼唤他
  7. function sendMessage(data) {
  8.     topWin.proxyWin = window;
  9.     topWin.getMessage(data);
  10. }
复制代码


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

  1. // 子窗口
  2. var proxyWin = null;
  3. function getMessage(data) {
  4.     alert("messageFormProxyWin:"+data);
  5.     sendMessage("top has receive data:"+data);
  6. }

  7. // 调用子窗口方法
  8. function sendMessage(data) {
  9.     if (null != proxyWin) {
  10.         proxyWin.getMessage(data);
  11.     }
  12. }
复制代码


然后再来搞定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

评分

1

查看全部评分

本帖被以下淘专辑推荐:

  • · 跨域|主题: 3, 订阅: 0
八号 发表于 2012-1-7 08:15:27 来自手机 | 显示全部楼层
顶一下,好帖
您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|Archiver|天空小小岛 ( 京ICP备17043412号-1|

GMT+8, 2019-5-19 14:25 , Processed in 0.201218 second(s), 29 queries , Gzip On.

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表