iframe的運用---特別是獲取父子頁面的元素

TL;DR

• 使用<iframe src="./iframe.html" frameborder="0" scrolling="auto" name="iframe"></iframe>
• 同域的狀況下，當前頁面獲取iframe頁面裏面的元素的話，必須使用加載事件，window.frames.iframeName.onload = ...，window.frames.iframeName.document就是iframe的document
• 同域的狀況下，子頁面獲取父頁面元素的話，window.parent.document就是父頁面的document
• 查看示例demo，demo地址

簡單的概念

• iframe功能：可以將另外一個HTML頁面嵌入到當前頁面中。
• 父頁面：iframe元素存在的頁面，也就是當前頁面
• 子頁面：iframe的src的頁面，也就是當前頁面裏面嵌套的頁面
• 同域：子頁面和父頁面的地址同域（協議端口域名均相同）
• 跨域：子頁面和父頁面的地址跨域
• ！！！跨域的父子頁面不能進行獲取元素的操做，只能有顯示的操做
• 查看示例demo，demo地址

簡單使用和屬性介紹

<iframe src="./iframe.html" frameborder="0" scrolling="auto" name="iframe"></iframe>
複製代碼

屬性以下：

• frameborder:是否顯示邊框，1(yes),0(no)
• height:框架做爲一個普通元素的高度，建議在使用css設置。默認值爲150px。
• width:框架做爲一個普通元素的寬度，建議使用css設置。
• name:框架的名稱，window.frames[name]時專用的屬性。
• scrolling:框架的是否滾動。yes,no,auto。
• src：內框架的地址，能夠使頁面地址，也能夠是圖片的地址。
• srcdoc , 用來替代原來HTML body裏面的內容。可是IE不支持。
• sandbox: 對iframe進行一些列限制，IE10+支持

當前頁面獲取iframe頁面的元素---必須是同域

window.frames能夠獲取頁面全部的iframe元素。 獲取iframe的的window：

• window.frames.iframeName，主要這裏的iframeName是iframe的name屬性值。這時候就能夠用window的一系列屬性了。
• 或者，document.getElementById("frameid").contentWindow
• 這裏特別注意，必須等iframe頁面都加載完了才能獲取iframe裏面的元素，window.frames.iframeName.onload = funcetion(){...}

<!-- index.html -->
<iframe src ="/iframe.html" id="test" name="test" scrolling="yes">
 <p>Your browser does not support iframes.</p>
</iframe>

<script> // iframe.html裏面的window var iwindow_alias = document.getElementById("testid"); var iwindow = window.frames.test; // 獲取iframe的元素就須要在iframe加載後 iwindow.onload = function() { // iframe.html裏面的document var idoc = iwindow.document; // iframe.html裏面的body var ibody = idoc.body; // iframe.html裏面的元素 var iele = iwindow.document.querySelector("a"); console.log(idoc, ibody, iele); }; </script>
複製代碼

iframe獲取父頁面的元素 --- 必須是同域

在iframe頁面裏，經過訪問window.parent，引用它的父框架的window。

<!-- iframe.html -->
  <button>點擊</button>
  <script> // index.html裏面的window var pwindow = window.parent // index.html裏面的document var pdoc = pwindow.document // index.html裏面的body var pbody = pdoc.body // index.html裏面的a元素之類的 var pele = pdoc.querySelector('a') </script>
複製代碼

---

iframe的使用
mdn上iframe的使用
判斷iframe框架是否加載完成的方法