应用postMessage让 iframe自融入高宽比的方式示例

日期:2021-02-22 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

序言

有时,大家会应用 iframe标识,将前端开发分离出来新项目无感的嵌入 如以Freemark为行为主体较老的新项目中。

大家了解,当iframe內部內容比父网页页面所特定的宽伟岸的情况下,会出現翻转框。

因此,让iframe的宽高能依据本身內容全自动更改,就变成1个务必要处理的难题。

应用HTML5中新界定的window.postMessage 能够完成跨window通讯。

demo实际效果

演试详细地址: www.mixvjiezi.xyz/demo/iframe

大家要的实际效果如上图所示。

黄色地区 是根据 iframe标识引进 的body.html一部分。

index.html :

<!DOCTYPE html>
<html lang="en">
    <script src="https://code.jquery.com/jquery⑶.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⑻" />
    <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⑶.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⑻" />
     <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>

正题

大家了解,把大象装进去必须4步。

应用postMessage API推送信息比装大象要少1步,只必须3步就行。

各自是:

1、寻找推送目标

2、推送信息

3、设定信息解决

接下来,大家用上面的事例,11来讲。

1、寻找推送总体目标目标

应用window.parent 便可以获得引进本身文本文档的父window目标。

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

我在这1步中还原始化了评定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挂在1个单机版恶性事件,每次点一下时,都会提升50xp的宽高(假如宽度超过等于1250则宽度不提升)。

随后应用el.postMessage(message,  targetOrigin)方式推送信息。

el:

el是别的对话框的1个引入,例如iframe的contentWindow特性、实行window.open回到的对话框目标、或是取名过或标值数据库索引的window.frames。

message:

message主要参数是要传送的数据信息信息体。

targetOrigin:

targetOrigin主要参数根据对话框的origin特性来特定哪些对话框能接受到信息恶性事件,其值能够是标识符串"*"(表明无尽制)或1个URI。在推送信息的情况下,假如总体目标对话框的协议书、主机详细地址或端口号这3者的随意1项不配对targetOrigin出示的值,那末信息就不容易被推送;仅有3者彻底配对,信息才会被推送。

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标识的宽高。

解决涵数传入1个主要参数e,e是1个信息目标,包括以下关键特性:

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,则能够设定弹出1个带弹层的alert,內容从message.data获得

这样便可以处理,在iframe中弹层不可以遮盖到外界的难题。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。