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

這篇文章主要是在說明如何使用 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 功能: