JavaScript 判斷網頁能不能被 IFrame 嵌入

IFrame 是一個分享資訊非常方便的的方式

只要輸入

1
<iframe src="http://example.com/"></iframe>

就可以嵌入一個網頁了!

然而,事實上並不是這麼的完美,並不是所有的網頁都允許嵌入…

譬如說 Google,如果妳直接就輸入 Google 的網址,如下面

1
<iframe src="http://google.com"></iframe>

那麼將只會得到一個空白的 IFrame 而已…

如果有打開 Console 的話,就會看到一些安全性上的錯誤,不過很可惜的 JavaScript 很難去 handle 這個錯誤…

針對 IFrame 監聽 onerror 是沒用的,因為根本沒有這個事件!

那麼如果針對 window.onerror 呢?

可以捕捉到錯誤,但是卻不能判斷到底能不能載入…(即便是可以嵌入的網站,也會有一些錯誤訊息出現)

最後如果針對 IFrame 監聽 onload 如果網站可以嵌入,就會觸發這個事件,如果不能嵌入就不觸發

問題是,網站何時還會觸發 onload 事件呢?如果用 setTimeout 解的話,到底要設定多久呢?

怎麼設定都會有問題,那麼究竟該怎麼樣才可以準確的呈現出此網頁不允許嵌入的資訊給 User 看呢?

要針對幾個 IFrame 的特性來解決這個問題

  1. 當 IFrame 的 src 的網址是允許嵌入的話,會把網頁呈現出來
  2. 當 IFrame 的 src 的網址是不允許嵌入的話,是不會改變目前的畫面的
  3. 當 IFrame 沒有給定 src 時,內容是空白的

另外,有一個 url 非常的特別,那就是 about:blank,這個 url 就是全白的內容,連 HTML 都沒有

但是 parent 的 JavaScript 是可以操縱該 IFrame 的內容的!

要怎麼做就呼之欲出了!

  1. 把 IFrame 的 src 設定為 about:blank
  2. 監聽 IFrame 監聽 load 事件,並且在 callback 中要處裡幾件事情
    1. 當中把先把錯誤訊息埋好
    2. 在把 IFrame 的 src 換成要嵌入的 url
    3. 取消監聽 IFrame 的 load 事件
  3. 看成果!

如果 url 是不允許被嵌入的,就會看到錯誤訊息,反之則是正確的結果!

最後看範例吧…