ZWH ZONE

[JavaScript] 操作 iframe 元素，製作編輯的瀏覽畫面

zhiwei. huang -

這篇文章主要是在說明如何使用 JavaScrip 來對 iframe 進行操作

紀錄與分享一下目前操作的經驗與方法

情境

首先先描述一下常見的情境

一般我們會需要直接操作 iframe 的需求，比較常見的就是 會員後台 或是 一些工具的 GUI 介面

通常使用者在操作後台提供的編輯介面時，旁邊可能都會專門用來 demo 使用者設定結果的 demo 畫面

例如：WordPress 後台的自訂外觀

如果你覺得手癢癢的去解析一下右邊那整塊 示意的區塊 ，你會發現他們也是使用 iframe 的元素進行製作的

為什麼要使用 iframe 來製作，用普通的 div 難道不行嗎？

當然要用 div 做也不是不行，不過可能會遇到一個很難處理的問題

舉例來說：

今天我們使用 div 來製作 示意的區塊，假設今天我在製作編輯後台介面時，寫了一個 css 的樣式為：

.text-danger{
 color:red;
}

那假設今天 示意的區塊 裡，的 html 的結構有以下的形式

<div class="text-danger">注意</div>

那可能會導致 示意出來的畫面 受到一些無關的 code 的影響，而導致畫面的不一致

也就因為以上的原因，我們使用 iframe 來作為 示意區塊 的元素，以避免上述因 scope 而產生出的問題

好的～那現在我們要討論的問題就是 如何動態將資料帶入 iframe 裡面，輸出對應的結果呢？

iframe 裡的元素不就等同於其他站的元素了嗎？那該如何進行操作呢？

接下來就開始進入主題了

方法一

HTMLIFrameElement.contentWindow

我們可以直接在 iframe 的元素底下的 HTMLIFrameElemen 的屬性，來取得 iframe 裡的 window 物件，如下：

const iframeWindow = document.getElementsByTagName('iframe')[0].contentWindow
// iframeWindow 現在 iframe 裡的 window 物件

接下來我們就可以針對從 iframe 裡取得的 window 物件進行操作啦～

你想怎麼搞就怎麼搞～

iframeWindow.document.body.innerHTML = "Hello World !!"

See the Pen iframe.contentWindow by SkyRoxas (@SkyRoxas) on CodePen.

方法二

1、使用 Blob 的資料類別，將資料進行打包 參考文件
2、使用 URL.createObjectURL() 的方法將 Blob 的資料轉換並回傳為 URL
3、將產生出的 URL 帶入 iframe 裡的 src 以呈現結果

代碼如下:

const blob = new Blob(['<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>hello world</body></html>'],{ "type" : "text/html" })

const iframeDom = document.getElementsByTagName('iframe')[0]
const iframeSrc = URL.createObjectURL(blob)

iframeDom.src = iframeSrc

See the Pen iframe createObject by SkyRoxas (@SkyRoxas) on CodePen.

這邊提供的兩種方式，都有適當的使用時機，在這邊提供與大家參考了

Facebook 功能：