使用postMessage让 iframe自适应高度的方法示例_html5教程技巧

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

你跨域想做到什么效果?跨域的关键在于对方允许你的跨域访问你这边再怎么单方面努力都是没用的…www.zgxue.com防采集请勿采集本网。

前言

有时候,我们会使用 iframe标签,将前端分离项目无感的嵌入 如以Freemark为主体较老的项目中。

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

我们知道,当iframe内部内容比父页面所指定的宽高大的时候,会出现滚动框。

那段项文的意思是:按DEL键进入BIOS设置,按TAB键显示BIOS的自举信息。看这意思应该是主板到这时就死机了。正常时,显示这个的同时,一般就开始CPU、内存的自检了。如果都过,就开始检测硬盘光驱

所以,让iframe的宽高能根据自身内容自动改变,就成了一个必须要解决的问题。

'夜深了,Ctrl 和 O的按键码你自己找 先发送 Ctrl建按下 再发送 O建按下 再发送 O键弹起 再发送 Ctrl键弹起 每次发送之间 最好加个DoEvents

使用HTML5中新定义的window.postMessage 可以实现跨window通信。

在MFC中使用PostMessage和SendMessage函数: BOOL PostThreadMessage(UINT message,WPARAM wParam,LPARAM lParam);Called to post a user-defined message to another CWinThread object 使用这

demo效果

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

演示地址: www.mixvjiezi.xyz/demo/iframe

我们要的效果如上图所示。

黄色区域 是通过 iframe标签引入 的body.html部分。

index.html :

<!DOCTYPE html><html lang="en"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"> var $ = window.jQuery; </script> <style> .header{ width: 100%; min-width: 1260px; height: 70px; background-color: red; box-shadow: 0 0 5px black; border-radius: 10px; } .center{ width: 1560px; height: 1470px; margin: 20px auto; } .iframe{ width: 250px; height: 250px; margin: 20px 0 0 40px; } .left-nav{ width: 200px; height: 1470px; background-color: blue; float: left; margin-top: 10px; box-shadow: 0 0 5px black; border-radius: 10px; } </style> <head> <meta charset="utf-8" /> <title>css study</title> </head><body> <div class="header"> </div> <div class="center"> <div class="left-nav"></div> <iframe class="iframe" id="shopIframeId" src="./body.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe> </div> <script type="text/JavaScript"> window.addEventListener('message', e => { if (e.data.type === 1) { $('#shopIframeId').width(e.data.data.width + 50) $('#shopIframeId').height(e.data.data.height + 50) } }); </script></body></html>

body.html:

<!DOCTYPE html> <html lang="en"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"> var $ = window.jQuery; </script> <style> .box{ width: 200px; height: 200px; box-shadow: 0 0 5px black; border-radius: 10px; background-color: yellow; } </style> <head> <meta charset="utf-8" /> <title>css study</title> </head> <body> <div class="box"> </div> </body> <script type="text/JavaScript"> var data = { el: $('.box'), height: $('.box').outerHeight(), width: $('.box').outerWidth(), parent: window.parent } $('.box').on('click', function () { // 更新数据 if (data.width < 1250) { data.width += 50 } data.height += 50 // 更新视图 data.el.width(data.width) data.el.height(data.height) // 通知父window 自身高度变更 data.parent.postMessage({ type: 1, data: { width: data.width, height: data.height } }, '*') })</script> </html>

正题

我们知道,把大象装进去需要四步。

使用postMessage API发送消息比装大象要少一步,只需要三步就行。

分别是:

1、找到发送对象

2、发送消息

3、设置消息处理

接下来,我们用上面的例子,一一来说。

1、找到发送目标对象

使用window.parent 就可以获取引入自身文档的父window对象。

var data = { el: $('.box'), height: $('.box').outerHeight(), width: $('.box').outerWidth(), parent: window.parent }

我在这一步中还初始化了鉴定dom,监听dom的height和width,核心是用window.parent获取 index.html文件的window对象 

2、在iframe中发送消息

$('.box').on('click', function () { // 更新数据 if (data.width < 1250) { data.width += 50 } data.height += 50 // 更新视图 data.el.width(data.width) data.el.height(data.height) // 通知父window 自身高度变更 data.parent.postMessage({ type: 1, data: { width: data.width, height: data.height } }, '*') })

给目标div挂在一个单机事件,每次点击时,都会增加50xp的宽高(如果宽度大于等于1250则宽度不增加)。

然后使用el.postMessage(message,  targetOrigin)方法发送消息。

el:

el是其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames

message:

message参数是要传输的数据消息体。

targetOrigin:

targetOrigin参数通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。

3、设置消息处理

window.addEventListener('message', e => { if (e.data.type === 1) { $('#shopIframeId').width(e.data.data.width + 50) $('#shopIframeId').height(e.data.data.height + 50) } });

我再index.html 添加了message监听,如果有消息被发送过来,则会触发处理函数,更新iframe标签的宽高。

处理函数传入一个参数e,e是一个消息对象,包含如下重要属性:

data:

从其他 window 中传递过来的对象。

origin:

调用 postMessage 时消息发送方窗口的origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “ https://example.org (隐含端口 443 )”、“ http://example.net (隐含端口 80 )”、“ http://example.com:8080 ”。请注意,这个origin不能保证是该窗口的当前或未来origin,因为postMessage被调用后可能被导航到不同的位置。

source:

对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

小结

在消息传输中,我使用type属性,在iframe中传输不同的message.type和message.data,父window中就可以根据不同的message.type做出相应的处理。

譬如message.type如果等于2,则可以设置弹出一个带弹层的alert,内容从message.data获取

这样就可以解决,在iframe中弹层不能覆盖到外部的问题。

应该了解一下SendMessage和PostMessage的区别,SendMessage会直接发送给那2113个对应的窗口,然后窗口就会马上处理发送过来的消息,但是注意,对于5261GUI程序,你必须显式调用4102Invalidate和UpdateWindow,否则界面不会变化,但是其实消息已经处理了。但是PostMessage发送的消息是1653放入到对应窗口的消息队列中,然后就直接回返回,不管消息如何执行。而消息队列中的消息是按FIFO的次序执行的,这样就不能马上表现出来了,答具体何时执行,要看这个消息队列中的消息个数了,你的用发是正确的,但是你应该先发送WM_KEYDOWN,再发送WM_KEYUP,要不然你直接发WM_CHAR。这里不能用SendMessage,我以前试过,必须用PostMessage才可以模拟按健,SendMessage根本不起作用 我也定义过WM_CHAR=101 也不起作用 不知道是什么原因,你吧这两个说反了内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • web响应式布局中iframe自适应的方法
  • iframe 多层嵌套 无限嵌套 高度自适应的解决方案
  • 网页设计技巧:iframe自适应高度的问题
  • iframe标签用法详解(属性、透明、自适应高度)
  • 三谈iframe自适应高度代码
  • iframe 高度自适应(兼容ie/firefox、同域/跨域)
  • iframe 自适应大小实现代码
  • PostMessage使用问题
  • 如何使用postmessage方式实现跨域访问
  • VB postmessage的使用方法要详细
  • c#怎么使用PostMessage函数模拟按键输入啊
  • 求个使用PostMessage进行进程通信的例子
  • 我的电脑开机出现Press DEL to run Setup Press TAB to display BIOS POST Message显示
  • 使用PostMessage发送ALT+O怎么写???
  • MFC中使用PostMessage和SendMessage函数
  • 请教使用postmessage发送键盘消息时,参数如果设置
  • VC++ PostMessage 的使用
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5postmessageiframe自适应高度web响应式布局中iframe自适应的方法iframe 多层嵌套 无限嵌套 高度自适应的解决方案网页设计技巧:iframe自适应高度的问题iframe标签用法详解(属性、透明、自适应高度)iframe 高度自适应(兼容ie/firefox、同域/跨域)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