JavaScript?跳出iframe框架示例詳解
更新時間：2023年11月06日 11:38:40 作者：后除
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
一、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 主機(jī)的域名
- location.pathname 返回當(dāng)前頁面的路徑和文件名
- location.port 返回 web 主機(jī)的端口（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 框架的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 跳出 iframe 框架的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇layui自定義工具欄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript實(shí)現(xiàn)獲取字符串hash值
Hash 可以看作是一個 關(guān)聯(lián)數(shù)組，它對每一個值都綁定了一個唯一的鍵（值并不必須是唯一的）， 然而，它不能保證迭代時元素的順序始終一致。因?yàn)?JavaScript 程序語言的特性，每個對象實(shí)際上都是一個 hash,下面我們就來詳細(xì)探討下。2015-05-05
js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
BootStrap智能表單實(shí)戰(zhàn)系列(三)分塊表單配置詳解
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(三)分塊表單配置詳解的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要給大家介紹了關(guān)于Javascript異步流程控制之串行執(zhí)行的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
本文主要分享了javascript實(shí)現(xiàn)淡入淡出輪播切換功能的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
Javascript快速實(shí)現(xiàn)瀏覽器系統(tǒng)通知
這篇文章給大家介紹了Javascript快速實(shí)現(xiàn)瀏覽器系統(tǒng)通知的方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
這篇文章主要給大家介紹了關(guān)于js兩個數(shù)組合并去重的相關(guān)資料,日常開發(fā)中經(jīng)常會用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下2023-09-09
解決bootstrap-select 動態(tài)加載數(shù)據(jù)不顯示的問題
今天小編就為大家分享一篇解決bootstrap-select 動態(tài)加載數(shù)據(jù)不顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)
這篇文章主要介紹了js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11