JavaScript跳出iframe架構

標籤：click   htm   elf   pat   path   add   func   頂層視窗   org   

一、window.top

top屬性返回最頂層的先輩視窗。

該屬性返回對一個最上層視窗的唯讀引用。如果視窗本身就是一個最上層視窗，top屬性存放對視窗自身的引用。如果視窗是一個架構，那麼top屬性引用包含架構的頂層視窗。

二、window.self

self屬性可返回對視窗自身的唯讀引用。等價於Window屬性。

三、window.location

window.location（MDN）對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重新導向到新的頁面。

3.1 樣本

window.location = ‘http://www.mazey.net/‘; //網站將跳轉到後面的網址

3.2 屬性

• location.hostname返回web主機的網域名稱
• location.pathname返回當前頁面的路徑和檔案名稱
• location.port返回web主機的連接埠（80或443）
• location.protocol返回所使用的web協議（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>

五、總結

若想頁面跳出iframe在裡面加上下面這段代碼即可。

if(window.top !== window.self){ //若自身視窗不等於頂層視窗    window.top.location.href = window.self.location.href; //頂層視窗跳轉到自身視窗}

JavaScript跳出iframe架構

JavaScript跳出iframe架構