这是我做项目遇到的问题希望对你有帮助，忽喷！
[iframe与window对象(contentwindow)]
var detialIframe=document.all("detialIframe");
此处的IFrame是从document取得的,即作作为document的子对象出现,虽然是文档(document)对象,但由于它是独立的页面,因而拥有自己的事件,拥有自己的窗口对象(contentWindow); Window.detialIframe 或Window.frames(detialIframe)将直接取得IFrame的Window对象
iframe
iframe 元素也就是文档中的文档
window 对象
浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。但是，如果一个文档定义了一个或多个框架(即，包含一个或多个 frame 或 iframe 标签)，浏览器就会为原始文档创建一个 window 对象，再为每个框架创建额外的 window 对象。这些额外的对象是原始窗口的 子窗口，可能被原始窗口中发生的事件所影响。例如，关闭原始窗口将导致关闭全部子窗口。如果想要创建新窗口(以及对应的 window 对象)，可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。
contentWindow
contentWindow属性是指指定的frame或者iframe所在的window对象
在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则必须指定contentWindow属性。
说了这么多关于iframe，的介绍，接下来我们看看在实际使用中遇到的问题。
最近做一个项目移动端用vue框架写的，需要加载后台响应的文书，首先我想到了用iframe标签，
let amanuensis=res.data.data
let mobsf=document.getElementById("mobsf")
document.body.appendChild(mobsf)
mobsf.contentWindow.document.open();
mobsf.contentWindow.document.write(amanuensis);
mobsf.contentWindow.document.close();
本以为这样就可以成功了但是效果让人很失望文书根本不适配移动端，起初想着后台给我说这些文书是做个移动端适配的也没想那么多，我以为是meta头发生变化第一想法是meta的头部被覆盖了，查看源代码果然发现是被覆盖了。
这是我习惯用的meta头部，使页面宽度根据设备宽度自适应变化
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
可是后端落地的框架是按模板直接引入的，有部分的公共资源竟然也包含了设置viewport的meta。后端引入的是这个样子的：
<meta name="viewport" id="viewport" content="width=640px, user-scalable=no">
这一头部是被一段不得不被加入的js文件所append进入的，而且被明确告知，该js文件不可以被修改！所以这一设置宽度为固定640px的将我原本设置随设备宽度变化的meta覆盖了！
问题就来了，静态页面已经完成，且由于历史代码因素，我的vue项目已经做了移动端适配（如果vue移动端适配有问题可以看我上个简书有介绍，希望能给你带来帮助）所有代码样式单位都会自动转成rem，所以后端加载过来的文书也被转了，现在已经无法大规模修改css效果了。因为所有静态页面页面已经做完适配处理所以已经不好修改代码。
因为页面不适配放大,所以我首先想到了把后端相应文书缩小那么我就想到了css3的语法。
css3有个transform: scale()的方法
通过计算缩放比例 = 设备宽度 / 640 可以得出对应的缩放比例，再对引入的iframe设置transform: scale(缩放比例)就可以实现漂亮的缩放了！以为问题就这样解决吗？不1！并没有！iframe是缩放了，可高度也被缩放了，内容显示不完整了。
所以在这里这里设置height: 设备高度 / 缩放比例可以还原原本的iframe高度。
到这里其实发现问题还没结束，因为我们缩放之后iframe标签也随之，默认的向下和向右也移动了一段距离，这是因为scale()默认是按中心进行缩放的！这里花了大量时间去寻找合适的方法解决，比如负margin、translate()等，但是由于难以计算合适的移动比例系数，恕本人算法辣鸡，这一方法尝试很久终于决定还是放弃，跟领导说适配不了，但是心里还是有些不甘。
经过查找资料我发现了一个属性
transform-origin: x-axis y-axis z-axis;
它有3个属性值，分别代表定义视图被置于X、Y、Z轴的何处。
经过调试设置成一下属性
transform-origin:0 top 0
终于解决了这个问题，困扰了自己几天，可能因为自己确实太菜，但是功夫不负有心人还是解决了，所以学习只是还是不能囫囵吞枣，一个属性解决的问题我浪费几天时间，希望对大家有帮助！！！
