iframe自适应宽度,iframe自适应内容高度
前言
有时候，我们会使用内联框架标签，将前端分离项目无感的嵌入如以自由标记为主体较老的项目中。
我们知道，当内联框架内部内容比父页面所指定的宽高大的时候，会出现滚动框。
所以，让内联框架的宽高能根据自身内容自动改变，就成了一个必须要解决的问题。
使用HTML5中新定义的窗户。发布消息可以实现跨窗户通信。
demo效果
演示地址：www.mixvjiezi.xyz/demo/iframe
我们要的效果如上图所示。
黄色区域是通过内联框架标签引入的body.html部分。
index.html:
！DOCTYPE html html lang= en script src= https://代码。jquery。com/jquery-3。1 .1 .量滴js var $=window。jquery/脚本样式。页眉{宽度：100%;最小宽度：1260像素；高度：70px背景色：红色；箱形阴影：0 0 5px黑色；边框半径：10px}。中心{宽度：1560像素身高：1470像素边距：20px自动；} .iframe { width:250 px；高度：250像素边距：20px 0 0 40px}。左导航{宽度：200 px身高：1470像素背景色：蓝色；浮动：左；页边距-顶部：10px箱形阴影：0 0 5px黑色；边框半径：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 frame border= 0 /iframe/div script type= text/JavaScript 窗口。addevent侦听器( message ，e={ if(e . data。type===1){ $( # shopIframeId ).宽度(例如数据。数据。width 50)$( # shopIframeId ).高度(数据。数据。身高50)})；/script/body/htmlbody.html:
！DOCTYPE html html lang= en script src= https://代码。jquery。com/jquery-3。1 .1 .量滴js var $=window。jquery/脚本样式. box {宽度：200 px高度：200像素箱形阴影：0 0 5px黑色；边框半径：10px背景色：黄色；}/style head meta charset= utf-8 /title CSS study/title/head body div class= box /div/body script type= text/JavaScript var data={ El:$( .框),高度：$(。方框)。outerHeight()，宽度：$(。方框)。outerWidth()，parent: window.parent } $( .方框)。on(click ，function () { //更新数据如果(数据。宽度1250){数据。width=50 }数据。高度=50//更新视图数据宽度(数据。宽度)数据.高度(数据。高度)//通知父窗户自身高度变更数据。父母。postmessage({ type:1，data: { width: data.width，height: data.height } }， * )/script/html正题
我们知道，把大象装进去需要四步。
使用邮件后应用程序接口发送消息比装大象要少一步，只需要三步就行。
分别是：
1、找到发送对象
2、发送消息
3、设置消息处理
接下来，我们用上面的例子，一一来说。
1、找到发送目标对象
使用窗户。父母就可以获取引入自身文档的父窗户对象。
var data={ el: $( .框),高度：$(。方框)。outerHeight()，宽度：$(。方框)。outerWidth()，parent: window.parent }我在这一步中还初始化了鉴定多姆，监听数字正射影像图的高度和宽度，核心是用窗户。父母获取index.html文件的窗户对象
2、在iframe中发送消息
$(.方框)。on(click ，function () { //更新数据如果(数据。宽度1250){数据。width=50 }数据。高度=50//更新视图数据宽度(数据。宽度)数据.高度(数据。高度)//通知父窗户自身高度变更数据。父母。postmessage({ type:1，data: { width: data.width，height: data.height } }， * )给目标差异挂在一个单机事件，每次点击时，都会增加50xp的宽高（如果宽度大于等于1250则宽度不增加)。
然后使用邮政信息(消息，目标源)方法发送消息。
el:
El是对其他窗口的引用，如iframe的contentWindow属性、通过执行Window.open返回的window对象或命名或数字索引的window.frames
消息：
消息参数是要传输的数据消息体。
目标来源：
targetorigin参数通过windows的origin属性指定哪些窗口可以接收消息事件，其值可以是字符串 * (表示无限制)或URI。发送消息时，如果目标窗口的任何协议、主机地址或端口与targetOrigin提供的值不匹配，则消息不会被发送；只有三者完全匹配时，才会发送消息。
3、设置消息处理
window . addevent listener( message ，e={ if(e . data . type===1){ $( # shopIframeId )。width(e . data . data . width 50)$( # shopIframeId )。height(e . data . data . height 50)})；我在index.html添加了消息监控。如果消息被发送，它将触发处理函数来更新iframe标记的宽度和高度。
处理函数传入一个参数E，它是一个消息对象，包含以下重要属性：
数据：
从其他窗口传递的对象。
产地：
调用postMessage时消息发送者窗口的原点。该字符串由协议“://”、域名和“:端口号”拼接而成。例如，https://example.org(暗示端口443)、http://example.net(暗示端口80)和http://example.com:8080。请注意，此原点不能保证是此窗口的当前或未来原点，因为postMessage在被调用后可能会被导航到不同的位置。
来源：
对发送消息的窗口对象的引用；您可以使用它在两个不同来源的窗口之间建立双向通信。
小结
在消息传输中，我在iframe中使用type属性来传输不同的message.type和message.data，父窗口可以根据不同的message.type做出相应的处理。
例如，如果message.type等于2，可以设置一个带有弹性层的预警弹出，内容取自message.data
这样可以解决iframe中子弹层无法覆盖外部的问题。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。