整理 vue 中 使用 iframe

基本格式

<iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin allow-scripts"></iframe>

基本属性：
  src iframe页面地址，有同域跨域之分
  height iframe高度
  width iframe宽度
  name iframe命名，可通过window.frames[xxx]被调用
  scrolling iframe滚动模式
  sandbox html5新特性，用于限制iframe的功能
    1. script脚本不能执行
    2. 不能发送ajax请求
    3. 不能使用本地存储，即localStorage,cookie等
    4. 不能创建新的弹窗和window
    5. 不能发送表单
    6. 不能加载额外插件比如flash等

| 配置                 | 效果                                            |
| -------------------- | --------------------------------------------- |
| allow-forms          | 允许进行提交表单                                      |
| allow-scripts        | 运行执行脚本                                        |
| allow-same-origin    | 允许同域请求,比如ajax,storage                         |
| allow-top-navigation | 允许iframe能够主导window.top进行页面跳转                  |
| allow-popups         | 允许iframe中弹出新窗口,比如,window.open,target="_blank" |
| allow-pointer-lock   | 在iframe中可以锁定鼠标，主要和鼠标锁定有关                      |

  sandbox="allow-forms allow-same-origin allow-scripts"

使用iframe的正确姿势

let iframe = document.getElementById('demo');
let iwindow = iframe.contentWindow; // 获取iframe的window对象
let idoc = iframe.contentDocument; // 获取iframe的document对象

也可以通过 window.frames[iframeName] 来调用iframe

实际是这么获取
let iframe = document.getElementById('iframe');
iframe.attributes[1].ownerElement.contentWindow;

iframe使用父级内容的正确姿势

通过
window.self，
window.parent，
window.top
这三个属性分别获取自身window对象，父级window对象，顶级window对象

iframe1.self === iframe1
iframe1.parent === iframe2
iframe2.parent === window
iframe1.top === window

iframe 方法

滚动
window.frames.scrollTo(x, y);

获取节点距顶部的距离

let node = document.getElementById(`node${this.current}`);
let offsetTop = node.attributes[1].ownerElement.offsetTop; // 这里 attributes 下标不固定 得具体查看节点信息