问题描述：
页面中有一容器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");
