天空小小岛技术网站

标题: 解决IFRAME跨域刷新,跨域操作JS的权限问题的一种办法 [打印本页]

作者: s.Bo 时间: 2011-12-31 18:10
标题: 解决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中加入如果代码:

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

复制代码

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

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

复制代码

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

<script type="text/javascript">
top.location.reload();
</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 页面定义相关的方法

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

复制代码

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

// 子窗口
var proxyWin = null;
function getMessage(data) {
alert("messageFormProxyWin:"+data);
sendMessage("top has receive data:"+data);
}
// 调用子窗口方法
function sendMessage(data) {
if (null != proxyWin) {
proxyWin.getMessage(data);
}
}

复制代码

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

作者: 八号 时间: 2012-1-7 08:15
顶一下，好帖

欢迎光临天空小小岛技术网站 (http://tkxxd.net/)