博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
通过iframe实现跨域通信
阅读量:5076 次
发布时间:2019-06-12

本文共 1197 字,大约阅读时间需要 3 分钟。

iframe还是很强大的,不仅能实现同域通信,还可以跨域通信,甚至跨协议通信(如file/http),如果再结合jsonp,那就有很多种玩法了。不过有几条原则需要记住:

  1. 当前层级中的任何Window都可以获取其他Window(iframe也是一个Window)
  2. 只有同域Window才可以互相操作
  3. 当前层级下的任何Window可以设置其他Window的location,即使是不同的域
  4. 当你改变url的hashtag(#后面的东东)时,页面不会刷新

举例来说,有这么个页面

			

可以在当前页面设置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强大的地方)

			

转载于:https://www.cnblogs.com/litaobupt/articles/3072322.html

你可能感兴趣的文章
VC 生成后事件 Post-Build Event
查看>>
正则表达式
查看>>
SQL Server dump 介绍(转载)
查看>>
Android Activity生命周期(转)
查看>>
关于相对布局的各种定位布局参数的总结
查看>>
Postman+Newman+Jenkins接口自动化框架
查看>>
从追MM谈Java的23种设计模式
查看>>
HTTPS是如何保证连接安全,你知道吗?
查看>>
读取二进制大对象
查看>>
ubuntu apt源配置
查看>>
[iOS]被忽略的main函数
查看>>
HTTP Header
查看>>
java正则表达式应用
查看>>
211. Orchard学习 二 2、ManualResetEvent 与 AutoResetEvent
查看>>
通过js检测到iframe,使父窗口重定向到index -----------???----------------------
查看>>
初识文档视图结构
查看>>
oracle如何获取当年第一月,如今年是2015年,则需获取 201501
查看>>
Swift字符串截取与Range使用
查看>>
程序员编程艺术:第五章、寻找满足条件的两个或多个数
查看>>
逆序单链表
查看>>