使用postMessage让 iframe自适应高度的方法示例


Posted in HTML / CSS onOctober 08, 2019

前言

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

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

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

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

demo效果

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

使用postMessage让 iframe自适应高度的方法示例

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

使用postMessage让 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中弹层不能覆盖到外部的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 #HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 #HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 #HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 #HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 #HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 #HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 #HTML / CSS
You might like
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python编写简单的HTML页面合并脚本
2016/07/11 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python中如何打包用户自定义模块
2020/09/23 Python
如何一键升级Python所有包
2020/11/05 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
行政助理求职自荐信
2013/10/26 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
服务宗旨标语
2014/07/01 职场文书
走群众路线剖析材料
2014/10/09 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
学生检讨书怎么写
2015/05/07 职场文书
Python中异常处理用法
2021/11/27 Python