问题描述：
软件定制开发供应商页面中有一容器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