问题描述:
软件定制开发供应商页面中有一容器div
,软件定制开发供应商有宽高属性。在div软件定制开发供应商中嵌入一个页面,呈现这种效果:
可以看到嵌入的页面只露出了一部分。
而我们希望:嵌入的页面能够完整无遮挡的展示在容器中。
整体思路:利用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="http://www.hewebgl.com/" frameborder="0"></iframe> </div></body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
效果:
我的容器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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
子页面调用父页面方法:
window.parent.methods.workOrderCallback(111)
- 1
父页面调用子页面方法:
childrenFrameName.window.childMethod();
- 1
子页面调用父页面方法:
window.parent.parentMethod();
- 1
2、判断当前窗口是否在一个框架中
var same = window.top == window.self document.write("当前窗口是否在一个框架中:" + same)
- 1
- 2
3、使用 jQuery 获取当前的iframe对象
// 1. $("#childIframe", window.parent.document)); // 2. parent.$("#childIframe");
- 1
- 2
- 3
- 4
4、transform
5、transform-origin