iframe嵌入网页时，页面大小怎么自适应

您所在的位置：网站首页 › 怎么调整iframe的位置 › iframe嵌入网页时，页面大小怎么自适应

iframe嵌入网页时，页面大小怎么自适应

2023-09-09 00:42| 来源: 网络整理| 查看: 265

问题描述：页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果：

在这里插入图片描述

可以看到嵌入的页面只露出了一部分。而我们希望：嵌入的页面能够完整无遮挡的展示在容器中。整体思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高（width: 1920px; height: 1080px;）。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%(这个就是自己定义或者跟着设计图来的，我写50%只是举例哦)，所以 transform: scale(0.5)这个数值是0.5，即宽高都缩小50%。 3、需要注意的点是，最好给容器div加个overflow: hidden;的属性，因为更多的时候你的容器div的宽高并不像现在这样正好都缩放50%，跟iframe页面的宽高比例一致。 DOCTYPE html> iframe嵌入网页时，页面大小怎么自适应 html, body { width: 100%; height: 100%; } body { background-color: rgb(228, 228, 228); overflow: hidden; } * { margin: 0px; padding: 0px; } .iframediv { width: 50%; height: 50%; margin: 100px auto; border: 10px dashed rgb(58, 58, 58); overflow: hidden; } .iframediv iframe { width: 1920px; height: 1080px; top: 0; left: 0; transform-origin: top left; transform: scale(0.5) } 效果：

在这里插入图片描述

我的容器div 宽高都是50%的情况，transform: scale(0.5) 是 0.5，效果如上图。那如果容器div 宽40%，高60%，容器和iframe页面宽高比例不一致呢？方式一：transform: scale(0.4, 0.6)

完全按照父元素的容器比例来缩放，这样iframe会撑满整个父元素，但是页面会变形。这种方式适用于容器的宽高比例和iframe的宽高比差别不是很大的情况。

在这里插入图片描述

方式二：transform: scale(0.4)

此处容器的宽40%，高60%，宽是X轴方向，高是Y轴方向。按照比例较小的那个轴缩放，这样可以保证iframe页面不变形，但是比例较大的那个轴不会被撑满。在这里插入图片描述

拓展 1、父子iframe通信

父HTML

　 window.methods = { workOrderCallback() { console.log(arguments) } }; 子页面调用父页面方法： window.parenthods.workOrderCallback(111) 父页面调用子页面方法： childrenFrameName.window.childMethod(); 子页面调用父页面方法： window.parent.parentMethod(); 2、判断当前窗口是否在一个框架中 var same = window.top == window.self document.write("当前窗口是否在一个框架中：" + same) 3、使用 jQuery 获取当前的iframe对象 // 1. $("#childIframe", window.parent.document)); // 2. parent.$("#childIframe"); 4、transform

在这里插入图片描述

5、transform-origin

在这里插入图片描述

【本文地址】

iframe嵌入网页时，页面大小怎么自适应

iframe嵌入网页时，页面大小怎么自适应

今日新闻

推荐新闻