整理 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 下標不固定 得具體查看節點信息