澳门百老汇游戏 服务器常用软件

澳门百老汇游戏报道使用postMessage让 iframe自适应高度的方法示例_澳门百老汇游戏官网资讯

  公布时间:2019-10-08 15:55:20   作者:一不小心就😍 😞   我要议论
这篇文章主要介绍了使用postMessage让 iframe自适应高度的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有肯定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

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

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

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

使用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-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中弹层不克笼盖到外部的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多撑腰澳门百老汇游戏。

相关文章

  • web响应式结构中iframe自适应的方法

    响应式的概念应该是笼盖了自适应,但是包括的东西乐天堂备用 国际了。响应式结构能够依据屏幕的大小主动的调整页面的展现方式,以及结构。这篇问题给大家介绍了在web响应式结构中让ifr
    2016-10-20
  • iframe 多层嵌套 无限嵌套 高度自适应的解决方案

    有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应,具体实现如下,感兴趣的朋友能够参考下
    2013-09-23
  • 网页设计技术:iframe自适应高度的问题

    所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe
    2012-11-12
  • iframe标签用法详解(属性、透明、自适应高度)

    iframe一般用来包含别的页面,例如我们能够在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解乐天堂备用 国际的iframe属性,这里简
    2014-10-01
  • 三谈Iframe自适应高度代码

    在构建B/S系统界面的时刻,经常会遇到主页面index.html中嵌套别的页面的情况 ,虽然已经有的库已经提供了控件(例如jQuery easy UI),但是有时刻iframe的使用是不可幸免的
    2010-08-06
  • Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括当前正火热的应用开拓也是如此。
    2010-03-17
  • iframe 自适应大小实大福娱乐注册送体验金码

    js对跨域iframe访问问题,因为要操纵a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,扫瞄器为了安定性考虑,使js跨域访问受限,读取不到b.ht
    2009-08-08

最新议论

微信 博狗亚洲娱乐场网址 交流社区 在线工具
条评论