IFRAME的各种经验总结
在一个页面中如果想嵌套子页面，应该能想到iframe,的确它之前的应用非常广泛，它可以实现无缝刷新，模拟onhashchange跨域，安全的加载第三方资源与广告，实现富文本编辑，文件上传，用它搞定IE6-IE7的select BUG（select标签会移到遮罩层的上面来，可以使用iframe遮住）。不过后来因为一些iframe本身的缺陷，出于安全性的考虑，如今渐渐的淡出的大家的视角。
- iframe自身设置allowTransparency属性为true.（但设置了allowTransparency=true,就遮不住select了）
- iframe中的文档（src指向的页面），background-color或body元素的bgColor属性必须设置为transparent。
- 在iframe内获取window对象只能获取到当前iframe内的对象，获取父页面的方法只需在方法前面加上parent,
- 必须parent.window就找到的是父元素的window对象，父页面控制子页面只用document.frames(iframe的name)ducument.frames(\’myiframe\’).document.getElementsByTagName(\’body\’)[0].就能找到iframe的body元素，然后如何判断是否在iframe内部还是外部，可以根据window.frames.length和parent.frames.length来进行判断
在主页面直接，frames[iframeName]，iframes是主页面中的一个对象，它的属性iframeName可以获得此名字的iframe的window对象。
前面是w3c，后面的写法是IE.
此replace方法不是字符串的replace方法，这个replace方法是location专有的方法，意思是替换window的链接地址，而且被替换的链接地址不存入历史记录中。
iframe和父窗口共享history
页面加载iframe内部的图片和文字都是不可被复制的，iframe是受微信的安全限制。防止挂马入侵，因此阻止了很多事件的默认行为
- 利用iframe和location.hash
- 利用iframe和window.name
在响应头里加一个X-Frame-Options，取值有三种，大部分浏览器都支持。这样被不同源的页面以iframe包含时就不会显示了。
或者用下面这种
Vue开发中使用iframe
内容：
- iframe 全屏显示
- 通过代码切换 iframe 中的页面
- iframe 中页面调用父页面中的方法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 在多页面开发中经常会用到。
如果需要在页面中控制 iframe 的高度和宽度，则必须将所在页面的高度和宽度先调整为 100%；如：
100% 也可以写成 100vh、100vw。
然后通过 css 来调整 iframe 的大小，如：
我们一般情况下，采用 iframe 的 src 属性来控制其中显示的页面，但当 iframe 中的页面跳转到其他页面时，这是我们改变 src 属性的值，iframe 不会将页面切换到要显示的页面，所以可以通过代码来控制 iframe 加载的页面，如针对上面代码中的 iframe 标签，相应的代码为：
在 Vue 中使用 iframe 时，我们要实现 iframe 中的页面调用父页面中的方法，可以使用 postMessage 消息传递的方式来实现，如：
父页面中的代码：
iframe 中的页面代码：
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
