详解使用postMessage解决iframe跨域通信问题_html5教程技巧

来源:脚本之家  责任编辑:小易  

将一条消息投递到指定窗口的消息队列第一个参数就是要投递消息的控件或窗口句柄~第二个是消息常数Private Declare Function FindWindow Lib"user32"Alias"FindWindowA"(ByVal lpClassName As String,ByVal lpWindowName As String)As LongPrivate Declare Function PostMessage&Lib"user32"Alias"PostMessageA"(ByVal hwnd As Long,ByVal wMsg As Long,ByVal wParam As Long,lParam As Any)Dim hwd As LongPrivate Sub Command1_Click()Shell"notepad.exe",1hwd=FindWindow(vbNullString,"无标题-记事本")End SubPrivate Sub Command2_Click()PostMessage hwd,&H10,0,0End SubPrivate Sub Form_Load()Command1.Caption="打开记事本Command2.Caption="关闭记事本End Subwww.zgxue.com防采集请勿采集本网。

这周碰到一个让人头疼的需求:要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。

如果有消息队列的话PostMessage应该很容易的,除非你是想传递数组或者字符串之类的。这种情况你可以用 WM_COPYDATA,具体用法查查 msdn吧,在《windows核心编程》(Jetfrey Richter)第26章有使用这个消息

需求是这样的,在我的页面点击一些按钮,要实时反馈到iframe子页面,子页面再进行响应。

DllImport(\"user32.dll\")] static extern bool PostMessage(int hwnd,int msg,uint wParam,uint lParam);参数说明:int hwnd,int msg,uint wParam,uint lParam 第一参数是记事本的窗口句柄,这点必须要

当时脑子里第一时间想到的解决方案是:用NGINX把两个项目代理到同一域名下。但这样似乎有点小题大做了,有没有更方便快捷的方法呢?

最后就是概念修正,_ConnectionPtr它是一个标准的C++类,C++类可以重载->操作符,这个被重载的指针操作符,使得通过该类实例化的变量在实际使用时,行为更像是一个指针,而不是个普通变量,这个被重载的

在window对象下有个postMessage方法,是专门用来解决跨域通信问题的。

具体的参数情况就不为搂住列举了,相信楼主已经查过msdn. 说说区别 PostMessage只负责将消息放到消息队列中,不确定何时及是否处理 SendMessage要等到受到消息处理的返回码(DWord类型)后才继续

关于postMessage的详细介绍请戳这里,不过MDN的文档太详细了,导致有些同学看完还是一脸懵逼,下面我们就来看看怎么用postMessage实现iframe跨域通信,当你会用了之后再回去看文档,感觉是完全不同的。

#include int WINAPI WinMain(HINSTANCE hInstance,HINSTANCE hPrevInstance,PSTR szCmdLine,int iCmdShow) { HWND hwnd;hwnd=FindWindow(NULL,\"计算器\");窗口句柄可以使用 FindWindow 找到

首先我们模拟场景,假设有两个不同源的页面,iframePage.html是index.html的子页面:

<!-- index.html --><body style="border:5px solid #333;"> <h1>this is index</h1> <iframe src="./iframePage.html" id='myframe'></iframe></body>

<!-- iframePage --><body style="border:5px solid #333;"> <h1>this is iframePage</h1></body>

现在这两个iframe是无法通信,因为它们是不同源的(假设存在跨域问题),这时候就要用到postMessage了。

我们先试着从父页面向子页面发送一条消息:

// idnex.html//获取iframe元素iFrame = document.getElementById('myframe')//iframe加载完毕后再发送消息,否则子页面接收不到messageiFrame.onload = function(){ //iframe加载完立即发送一条消息 iFrame.contentWindow.postMessage('MessageFromIndex1','*');}

我们知道postMessage是挂载在window对象上的,所以等iframe加载完毕后,用iFrame.contentWindow获取到iframe的window对象,然后调用postMessage方法,相当于给子页面发送了一条消息。

postMessage方法第一个参数是要发送的数据,可以是任何原始类型的数据。

Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前,第一个参数必须是一个字符串。

postMessage方法第二个参数可以设置要发送到哪个url,如果当前子页面的url和设置的不一致,则会发送失败,我们设置为*,代表所有url都允许发送。

postMessage方法还有第三个参数,属于高级用法,这里不做讨论,可以稍后去MDN了解。

消息发送到iframePage.html,我们来接收message:

// iframePage.html//回调函数function receiveMessageFromIndex ( event ) { console.log( 'receiveMessageFromIndex', event )}//监听message事件window.addEventListener("message", receiveMessageFromIndex, false);

我们只需要在子页面监听message事件,并且设置好回调函数即可,来看看打印出来的event:

event对象中的data属性存放着我们从父页面传过来的数据,就这么简单!

让我们再试试从子页面发送数据给父页面:

// iframePage.html//给父页面发送消息,data为对象parent.postMessage( {msg: 'MessageFromIframePage'}, '*');

父页面接收数据:

//index.html//回调函数function receiveMessageFromIframePage (event) { console.log('receiveMessageFromIframePage', event)}//监听message事件window.addEventListener("message", receiveMessageFromIframePage, false);

我看看到,的确可以传输不同的数据,此时data为一个对象:

大家可以到postMessage-demo把代码clone下来运行试试看。

应该了解一下SendMessage和PostMessage的区别,SendMessage会直接发送给那个对应的窗口,然后窗口就会马上处理发送过来的消息,但是注意,对于GUI程序,你必须显式调用Invalidate和UpdateWindow,否则界面不会变化,但是其实消息已经处理了。但是PostMessage发送的消息是放入到对应窗口的消息队列中,然后就直接返回,不管消息如何执行。而消息队列中的消息是按FIFO的次序执行的,这样就不能马上表现出来了,具体何时执行,要看这个消息队列中的消息个数了内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 关于iframe跨域使用postmessage的实现
  • 使用postmessage让 iframe自适应高度的方法示例
  • PostMessage使用问题
  • VB postmessage的使用方法要详细
  • 如何使用postmessage方式实现跨域访问
  • 我的电脑开机出现Press DEL to run Setup Press TAB to display BIOS POST Message显示
  • 求个使用PostMessage进行进程通信的例子
  • c#怎么使用PostMessage函数模拟按键输入啊
  • 如何使用PostMessage从线程中向主线程发送一些数据
  • sendmessage和postmessage的区别
  • VC++ PostMessage 的使用
  • 电脑开机提示press DEL to run setup,press TAB to display BIOS POST Message
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5postmessageiframe跨域通信使用postmessage让 iframe自适应高度的方法示例html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved