作者使用场景（需求）：在注册页面，pdf协议放在model框中显示；
<Modal v-model="Agreement" width="700" :mask-closable="false">
<div class="iframeContent">
<iframe
:src="selectAgreement === 0 ? './static/doc/user-agreement.pdf' : './static/doc/user-data-authorization.pdf'"
width="100%" height="100%"
scrolling="no"></iframe>
</div>
<div slot="footer" class="footerButton">
<Button type="primary" size="large" @click="handleAgreement">确定</Button>
</div>
</Modal>
注意（新增需求）：如果pdf不需要工具栏可以在src地址后面添加 #toolbar=0&navpanes=0&scrollbar=0 ，
即为 :src="selectAgreement === 0 ? './static/doc/user-agreement.pdf#toolbar=0&navpanes=0&scrollbar=0' : './static/doc/user-data-authorization.pdf#toolbar=0&navpanes=0&scrollbar=0'"
页面显示状态：
浅谈iframe的优缺点及应用场景
一、使用iframe的优缺点
优点:
1.iframe能够把嵌入的网页原样展现出来；
2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；
5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；
6.方便制作导航栏。
缺点:
1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；
2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；
3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；
4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去；
5.产生多个页面，不易管理；
6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
二、为什么尽量少用iframe
iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了1-2个数量级。
使用iframe的页面一般不会包含太多iframe，所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload事件以及连接池(connection pool)，即iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池，会影响页面的并行加载。
1.iframes阻塞页面加载，影响网页加载速度
及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload事件加载延迟后，它给用户的感觉就是这个网页非常慢。
window的onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发，就会影响网页加载速度。通过 JavaScript 动态设置 iframe的SRC可以避免这种阻塞情况。
2.唯一的连接池
对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加鸟。Safari 3+和Opera 9+增至4个，Chrome 1+、IE 8及Firefox 3增至6个。
在大多数浏览器中，连接被主页面和它的 iframe所共享，这意味着有可能iframe中的资源占用了可用连接而阻塞了主页面的资源加载。如果iframe中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下iframe中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给iframe的src赋值。
总之，iframe会给你的页面性能带来冲击，尽可能不使用iframe，当确实需要时，谨慎地使用他们。目前框架的优点可以使用Ajax实现，这在某种角度也是一种替代方案。
三、iframe的一些应用场景
iframe的页面和父页面（parent）是分开的，所以它意味着，这是一个独立的区域，不受 parent的CSS或者全局的JavaScript的影响。
1.典型的，比如所见即所得的网页编辑器；
2.跨域通信。JavaScript跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放；
3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代；
4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换；
5.用iframe实现无刷新文件上传，在FormData不可用时作为替代方案；
6.创建一个全新的独立的宿主环境。iframe还可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用，通过创建一个iframe，然后从iframe中取回原始对象和方法来破解这种防范；
7.用来加载广告，例如联盟广告；
8.一般邮箱使用iframe，如QQ邮箱；
9.一些简单的后台页面。
关于iframe在跨域的使用，这里稍微强调一下
首先，我们要了解什么是跨域。简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。网络上已经有非常多可行的方案，我们只限定在iframe中去讲解几种跨域方案。
1、document.domain+iframe的设置
document.domain，这是浏览器暴露出来的一个准只读属性（之所以说它是准只读属性，是因为它可以设置为当前域名的超级域），利用这个特性，可以实现主域名相同子域名不同的网页实现通信。
2.使用HTML5 postMessage
HTML5提供的API，可以安全的启用跨域通信。
语法:targetWindow.postMessage(data, targetOrigin)，data参数是指要传递的数据。
如何在目标窗口接收到数据呢？编写如下代码即可：
window.addEventListener('message', function(evt) {
console.log(evt.data);
}, false);
evt.data即是postMessage中传递过来的数据。
特别注意两点
1.如果是协议和端口造成的跨域问题“前台”是无能为力的。
2.在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。