通过iframe实现跨域通信
2013-05-31 22:15
134 查看
通过iframe实现跨域通信
iframe还是很强大的,不仅能实现同域通信,还可以跨域通信,甚至跨协议通信(如file/http),如果再结合jsonp,那就有很多种玩法了。不过有几条原则需要记住:当前层级中的任何Window都可以获取其他Window(iframe也是一个Window)
只有同域Window才可以互相操作
当前层级下的任何Window可以设置其他Window的location,即使是不同的域
当你改变url的hashtag(#后面的东东)时,页面不会刷新
举例来说,有这么个页面
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <!-- 不同域的iframe页面 --> <iframe src="http://www.domain.com/foo" name="foo" id="foo"></iframe> <iframe src="http://www.domain.com/bar" name="bar" id="bar"></iframe> </body> </html>
可以在当前页面设置proxy iframe的location(原则1,3,4)
// 添加了一个hashtag,这样该iframe就不会刷新 $('#foo').attr('src', 'http://www.domain.com/foo#tag');
iframe foo操作iframe bar(原则1,2)
// in http://www.domain.com/foo $(parent.frames['bar'].document).find('#someid').html('message from foo');
所以跨域通信其实很简单,在iframe和主页里都不断地检测hashtag有没有变化,一旦有变化,就做出相应的改变。
setInterval(function() { var hashVal = window.location.hash.substr(1); document.body.style.backgroundColor = hashVal; }, 1000);
这么做的问题就是,需要不断地去检测hashtag是否改变,效率有点低,如果能通过原生的监听来实现,就会更加高效和优雅。这里就涉及到另一个iframe特性:可以设置其他iframe的大小,即使是不同域的。而页面的resize事件是可以监听的,所以就有了下面这个模型。
主页面先把消息附加到hashtag,然后改变一个隐藏的(或者页面外的)iframe的size。这个iframe会监听resize事件,同时捕获到hashtag。捕获到hashtag后(也就是所需的数据),再对hashtag做进一步的处理。处理完后把数据传到主页内的一个iframe,或者直接操作该iframe。这样就比较优雅地完成了跨域操作。
demo
将以下代码拷贝到本地的一个html文件,然后双击在浏览器中打开,看看能不能查单词。(ajax无法跨协议,这是iframe比ajax强大的地方)<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(function(){ $('#btn').click(function(){ $proxy = $('#proxy'); var src = $proxy.attr('src').split('#')[0]; $proxy.attr('src', src + '#' + $('input[name=it]').val()); $proxy.css('width', $proxy.width()+1+'px'); }); }); </script> </head> <body> <input type="text" name="it"> <button id="btn">Translate</button> <p></p> <iframe src="http://demo.leezhong.com/crossdomain/proxy.html" name="proxy" id="proxy" style="position:absolute; top:-10px; width:1px; height:1px"></iframe> <iframe src="http://demo.leezhong.com/crossdomain/show.html" name="show" id="show" style="width:60%;height:300px"></iframe> </body> </html>
更多玩法,可以参考这篇文章: Cross-Domain Communication with IFrames
原文链接:http://blog.leezhong.com/tech/2011/01/25/iframe-crossdomain.html,/article/10881502.html
相关文章推荐
- 通过iframe 实现upload file无刷新
- 通过隐藏iframe实现文件下载的js方法介绍
- 通过隐藏iframe实现无刷新上传文件操作
- 通过jq实现iframe自适应高度
- 收藏《CnForums和已有系统的整合方案》《通过IViewObject接口,取浏览器的图象,实现SNAP 》《SNAP的另类实现,采用iFRAME,内嵌框架的形式.》等
- js通过iframe加载外部网页的实现代码
- 如何通过单页实现类似iframe左右侧结构
- 文件上传 通过隐藏iframe的方式来实现ajax上传文件并返回处理结果 ie乱码问题解决
- js自定义方法通过隐藏iframe实现文件下载
- 如何通过单页实现类似iframe左右侧结构
- 通过P3P协议,实现跨域set cookie,解决同域IFRAME中SESSION传递失效问题
- 如何通过单页实现类似iframe左右侧结构
- 如何通过单页实现类似iframe左右侧结构
- 使用 iframe + postMessage 实现跨域通信
- 通过iframe调用页面的一部分,实现自己想要的页面
- 如何通过单页实现类似iframe左右侧结构
- 通过 iframe 实现 xss(Enabling cross-site scripting XSS via an iframe)
- 通过iframe实现ajax方式上传文件
- js自定义方法通过隐藏iframe实现文件下载
- 通过URL获取html代码实现页面嵌入(代替iframe效果)