DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS防止網頁被嵌入iframe框架的方法分析
JS防止網頁被嵌入iframe框架的方法分析
編輯:關於JavaScript     

本文實例講述了JS防止網頁被嵌入iframe框架的方法。分享給大家供大家參考,具體如下:

例如:

<script type="text/javascript">
  if (window!=top) // 判斷當前的window對象是否是top對象
  top.location.href = window.location.href; // 如果不是,將top對象的網址自動導向被嵌入網頁的網址
</script>

這段代碼是有效的。但是,有一個問題:使用後,任何人都無法再把你的網頁嵌入框架了,包括你自己在內。

於是,我今天就在考慮,有沒有一種方法,使得我的網頁只能被嵌入我自己的框架,而不是別人的框架?

表面上看,這個問題很簡單。只要做一個判斷:當前框架和頂層框架的域名是否相同,如果答案是否,就做了一個URL重定向。

if (top.location.hostname != window.location.hostname) {
  top.location.href = window.location.href;
}

但是,出乎意料的是,這樣寫是錯誤的,根本無法運行。你能看出,錯在哪裡嗎?

假定 top.location.hostname 是 www.111.com,而 window.location.hostname 是 www.222.com。也就是說,111.com把222.com嵌入了它的網頁中。這時,比較 top.location.hostname != window.location.hostname 會有什麼結果?

浏覽器會提示代碼出錯!

因為它們跨域(cross-domain)了,浏覽器的安全政策不允許222.com的網頁操作111.com的網頁,反之亦然。IE把這種錯誤叫做"沒有權限"。進一步說,浏覽器甚至不允許你查看top.location.hostname,跨域情況下,一看到這個對象,就直接報錯。

那麼,代碼應該如何修改?

事實上,這提示我們,只要查看top.location.hostname是否報錯就可以了。如果報錯了,表明存在跨域,就對top對象進行URL重導向;如果不報錯,表明不存在跨域(或者未使用框架),就不采取操作。

try{
  top.location.hostname;
}catch(e){
  top.location.href = window.location.href;
}

這樣寫已經正確了,在IE和Firefox中可以正確運行。但是,Chrome浏覽器會出現錯誤,不知為何,在跨域情況下,Chrome對top.location.hostname不報錯!

沒辦法,只能為了Chrome,再加一段補充代碼。

try{
  top.location.hostname;
  if (top.location.hostname != window.location.hostname) {
    top.location.href =window.location.href;
  }
}catch(e){
  top.location.href = window.location.href;
}

好了,升級版代碼完成。除了本地域名以外,其他域名一律無法將你的網頁嵌入框架。

更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript操作iframe技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》及《JavaScript遍歷算法與技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved