JavaScript?跳出iframe框架示例詳解
一、window.top
top 屬性返回最頂層的先輩窗口。該屬性返回對一個頂級窗口的只讀引用。如果窗口本身就是一個頂級窗口,top 屬性存放對窗口自身的引用。如果窗口是一個框架,那么 top 屬性引用包含框架的頂層窗口。
二、window.self
self 屬性可返回對窗口自身的只讀引用。等價于 Window 屬性。
三、window.location
window.location(MDN)對象用于獲得當(dāng)前頁面的地址 (URL),并把瀏覽器重定向到新的頁面。
3.1 示例
window.location = 'https://blog.mazey.net/547.html'; //網(wǎng)站將跳轉(zhuǎn)到后面的網(wǎng)址
3.2 屬性
- location.hostname 返回 web 主機的域名
- location.pathname 返回當(dāng)前頁面的路徑和文件名
- location.port 返回 web 主機的端口(80 或 443)
- location.protocol 返回所使用的 web 協(xié)議(http:// 或 https://)
四、iframe示例
<h1>iframe 1</h1> <button type="button" id="self">Show Self</button> <button type="button" id="selflocation">Show Self Location</button> <button type="button" id="selfhref">Show Self Href</button> <button type="button" id="top">Show Top</button> <button type="button" id="toplocation">Show Top Location</button> <button type="button" id="tophref">Show Top Href</button> <button type="button" id="replace">Replace Me To Whole Page</button> <script> document.getElementById('self').addEventListener('click', function(){ alert(window.self); }); document.getElementById('selflocation').addEventListener('click', function(){ alert(window.self.location); }); document.getElementById('selfhref').addEventListener('click', function(){ alert(window.self.location.href); }); document.getElementById('top').addEventListener('click', function(){ alert(window.top); }); document.getElementById('toplocation').addEventListener('click', function(){ alert(window.top.location); }); document.getElementById('tophref').addEventListener('click', function(){ alert(window.top.location.href); }); document.getElementById('replace').addEventListener('click', function(){ if(window.top !== window.self){ window.top.location.href = window.self.location.href; console.log('You replace successfully!'); }else{ console.log('You don\'t need replace, i\'m top!'); } }); </script>
總結(jié)
若想頁面跳出 iframe 在里面加上下面這段代碼即可。
if(window.top !== window.self){ //若自身窗口不等于頂層窗口 window.top.location.href = window.self.location.href; //頂層窗口跳轉(zhuǎn)到自身窗口 }
以上就是JavaScript 跳出 iframe 框架的詳細內(nèi)容,更多關(guān)于JavaScript 跳出 iframe 框架的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
file-loader打包圖片文件時路徑錯誤輸出為[object-module]的解決方法
這篇文章主要介紹了file-loader打包圖片文件時路徑錯誤輸出為[object-module]的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01用javascript關(guān)閉本窗口不彈出詢問框的方法
ie中用close關(guān)閉非open打開的窗口時回彈出一個對話框詢問用戶,怎么去掉這個框呢,在window.close之前加上window.top.opener = null就可以了2014-09-09一個不錯的應(yīng)用,用于提交獲取文章內(nèi)容,不推薦用
一個不錯的應(yīng)用,用于提交獲取文章內(nèi)容,不推薦用...2007-03-03input鏈接頁面、打開新網(wǎng)頁等等的具體實現(xiàn)
input可以鏈接到某頁、返回、打開新網(wǎng)頁、打開無邊框的新窗口等等,本文整理了一些,感興趣的朋友可以參考下2013-12-12小程序如何寫動態(tài)標(biāo)簽的實現(xiàn)方法
這篇文章主要介紹了小程序如何寫動態(tài)標(biāo)簽的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02用JS實現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)
用JS實現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)...2007-08-08