Posts match “ iframe ” tag:

週末長知識: 空白 iframe 指南

你曾經在網頁上使用過空白的 iframe 嗎? 我想大部分的人應該都沒有用過,我也沒有。
難得上週有機會一窺空白 iframe 的秘密,就做為本週的長知識內容來分享一下吧!

為了行文的方便,本文接下來的「空白 iframe」皆用「小白」簡稱之。

小白的樣貌

最簡單建立一個小白的方法:

<!-- 不需要寫 src 屬性 -->
<iframe></iframe>

<!-- 堅持要寫的話也只有 about:blank 這個選擇 -->
<iframe src="about:blank"></iframe>

在 DevTools 裡觀察的話就是長這個樣子:

可以看到瀏覽器還貼心的建立了諸如 <html>, <head>, <body> 等基本的網頁元素。

為小白新增內容

空白的iframe不是沒有HTML檔案嗎?要怎麼樣修改裡面的內容啊?

基本的概念就是先取得小白的 document,接著再利用 document.write() 或直接對 <body>, <head>appendChild;其實方法還算簡單,只需要寫好相應的 function,想要塞什麼東西進去都不成問題囉!

Read on