问题描述:
页面中有一容器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><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iframe嵌入网页时,页面大小怎么自适应</title></head><style>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)}</style><body><div class="iframediv"><iframe src="/" frameborder="0"></iframe></div></body></html>
效果:
我的容器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
<iframe src="child.html" frameborder="0" id="childIframe"></iframe><script>window.methods = {workOrderCallback() {console.log(arguments)}};</script>
子页面调用父页面方法:
window.parent.methods.workOrderCallback(111)
父页面调用子页面方法:
childrenFrameName.window.childMethod();
子页面调用父页面方法:
window.parent.parentMethod();
2、判断当前窗口是否在一个框架中
var same = window.top == window.selfdocument.write("当前窗口是否在一个框架中:" + same)
3、使用 jQuery 获取当前的iframe对象
// 1.$("#childIframe", window.parent.document));// 2.parent.$("#childIframe");