JS防止網(wǎng)頁(yè)被嵌入iframe框架的方法分析
本文實(shí)例講述了JS防止網(wǎng)頁(yè)被嵌入iframe框架的方法。分享給大家供大家參考,具體如下:
例如:
<script type="text/javascript"> if (window!=top) // 判斷當(dāng)前的window對(duì)象是否是top對(duì)象 top.location.href = window.location.href; // 如果不是,將top對(duì)象的網(wǎng)址自動(dòng)導(dǎo)向被嵌入網(wǎng)頁(yè)的網(wǎng)址 </script>
這段代碼是有效的。但是,有一個(gè)問(wèn)題:使用后,任何人都無(wú)法再把你的網(wǎng)頁(yè)嵌入框架了,包括你自己在內(nèi)。
于是,我今天就在考慮,有沒(méi)有一種方法,使得我的網(wǎng)頁(yè)只能被嵌入我自己的框架,而不是別人的框架?
表面上看,這個(gè)問(wèn)題很簡(jiǎn)單。只要做一個(gè)判斷:當(dāng)前框架和頂層框架的域名是否相同,如果答案是否,就做了一個(gè)URL重定向。
if (top.location.hostname != window.location.hostname) {
top.location.href = window.location.href;
}
但是,出乎意料的是,這樣寫是錯(cuò)誤的,根本無(wú)法運(yùn)行。你能看出,錯(cuò)在哪里嗎?
假定 top.location.hostname 是 www.111.com,而 window.location.hostname 是 www.222.com。也就是說(shuō),111.com把222.com嵌入了它的網(wǎng)頁(yè)中。這時(shí),比較 top.location.hostname != window.location.hostname 會(huì)有什么結(jié)果?
瀏覽器會(huì)提示代碼出錯(cuò)!
因?yàn)樗鼈兛缬颍╟ross-domain)了,瀏覽器的安全政策不允許222.com的網(wǎng)頁(yè)操作111.com的網(wǎng)頁(yè),反之亦然。IE把這種錯(cuò)誤叫做"沒(méi)有權(quán)限"。進(jìn)一步說(shuō),瀏覽器甚至不允許你查看top.location.hostname,跨域情況下,一看到這個(gè)對(duì)象,就直接報(bào)錯(cuò)。
那么,代碼應(yīng)該如何修改?
事實(shí)上,這提示我們,只要查看top.location.hostname是否報(bào)錯(cuò)就可以了。如果報(bào)錯(cuò)了,表明存在跨域,就對(duì)top對(duì)象進(jìn)行URL重導(dǎo)向;如果不報(bào)錯(cuò),表明不存在跨域(或者未使用框架),就不采取操作。
try{
top.location.hostname;
}catch(e){
top.location.href = window.location.href;
}
這樣寫已經(jīng)正確了,在IE和Firefox中可以正確運(yùn)行。但是,Chrome瀏覽器會(huì)出現(xiàn)錯(cuò)誤,不知為何,在跨域情況下,Chrome對(duì)top.location.hostname不報(bào)錯(cuò)!
沒(méi)辦法,只能為了Chrome,再加一段補(bǔ)充代碼。
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;
}
好了,升級(jí)版代碼完成。除了本地域名以外,其他域名一律無(wú)法將你的網(wǎng)頁(yè)嵌入框架。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作iframe技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript遍歷算法與技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS實(shí)現(xiàn)圖片橫向滾動(dòng)效果示例代碼
圖片橫向滾動(dòng)效果,大家可能都已經(jīng)很熟悉了,本文為大家介紹下使用js實(shí)現(xiàn)橫向滾動(dòng)效果,喜歡的朋友可以參考下,希望對(duì)大家有所幫助2013-09-09
JS實(shí)現(xiàn)圖片懶加載(lazyload)過(guò)程詳解
這篇文章主要介紹了JS實(shí)現(xiàn)圖片懶加載(lazyload)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
原生JavaScript實(shí)現(xiàn)異步多文件上傳
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)異步多文件上傳,感興趣的小伙伴們可以參考一下2015-12-12
JavaScript實(shí)現(xiàn)帶標(biāo)題的圖片輪播特效
這里給大家分享的是4屏帶標(biāo)題和文字描述的js圖片輪播代碼,完美兼容IE6。圖片滾動(dòng)切換,鼠標(biāo)放到數(shù)字選項(xiàng)卡即可切換圖片。點(diǎn)擊圖片跳轉(zhuǎn)到指定頁(yè)面,有需要的小伙伴可以參考下。2015-05-05
使用JS判斷移動(dòng)端手機(jī)橫豎屏狀態(tài)
本文通過(guò)js和cas代碼分別給大家介紹了移動(dòng)端判斷手機(jī)橫豎屏狀態(tài)的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07
javaScript Array(數(shù)組)相關(guān)方法簡(jiǎn)述
javaScript Array(數(shù)組)相關(guān)方法簡(jiǎn)述,讓大家更快的熟悉array數(shù)組的用法。2009-07-07
javascript實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單的簡(jiǎn)單制作
這篇文章主要介紹了javascript實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單的簡(jiǎn)單制作,感興趣的小伙伴們可以參考一下2015-11-11
HTML5+Canvas實(shí)現(xiàn)圖片添加水印功能
在現(xiàn)代Web開發(fā)中,圖像處理是一個(gè)常見(jiàn)的需求,尤其是為圖片添加水印,下面我們就來(lái)看看如何使用HTML5的Canvas技術(shù)為圖片添加水印,需要的可以了解下2024-11-11

