2016-05-12 96 views
0

我有一個來自我正在使用的網站的某個頁面的iframe,但我不希望該頁面的所有部分都與iframe一起顯示。特別是,頁面上有一個導航邊欄,我不想在iframe中。我試圖用下面看到的JavaScript來實現這一點,但我無法弄清楚它。從iframe中刪除id

<iframe width="800" height="800" src="scores/new?site_id=193"> 

<script> 
    var element = document.getElementById("sidebar-wrapper"); 
    element.parentNode.removeChild(element); 
</script> 

</iframe> 
+0

是從該'iframe'相同的域? –

+0

是的,現在一切都只是我的機器本地。我仍在測試 – Spance

回答

2

您可以在iframed網頁上插入控件

//inside the iframed page 
    var iframe = (function() { 
     try { 
      return window.self !== window.top; 
     } catch (e) { 
      return true; 
     } 
    })(); 

    if(iframe === true) { 
    var element = document.getElementById("sidebar-wrapper"); 
    element.parentNode.removeChild(element); 
    } 

希望這能滿足您的需要。

+1

@Spance這個真的很有用因爲它不需要兩個站點/域之間的任何類型的連接。 –

3

出於安全原因,您無法通過iframe運行javascript。如果你在同一個域中,但有一些例外,但大部分你應該避免它。

如果iframe不是您可以控制的網站,那麼幾乎沒有什麼可以做的。如果您確實控制了其他站點並且它是不同的域,則可以使用postMessage功能。

編輯:檢查出的文檔是Mozilla將在這裏https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

你需要對處理消息並隱藏側邊欄裏面創建一個監聽器。然後,父母向iframe發送消息以觸發該功能。

家長:

var iframe = document.getElementById('#iframeID'); 
iframe.contentWindow.postMessage('iframeTrigger'); 

的Iframe:

window.addEventListener('iframeTrigger', hideSidebar); 

function hideSidebar() { 
    //do stuff 
} 
+0

iframe來自的網站是我自己自己寫的一個應用程序 – Spance

+0

這裏也有一篇很好的文章https://davidwalsh.name/window-iframe – Rahul

0

這應該在理論上起作用,它在console有效。但是,這不起作用的HTML,雖然你從同一個域嘗試它,由於安全原因。我只是想告訴我的看法,我想這:

<iframe src="http://output.jsbin.com/figujeyiyo" frameborder="0" id="ifrm"> 
    Sorry, iframes not supported. 
</iframe> 
<script> 
    console.log(document.getElementById("ifrm").contentDocument.documentElement.getElementsByTagName("div")); 
    e = document.getElementById("ifrm").contentDocument.documentElement.getElementsByTagName("div")[0]; 
    console.log(e); 
    e.parentNode.removeChild(element); 
</script> 
0

您需要執行的代碼加載網頁時,你可以做這樣的:

document.addEventListener('DOMContentLoaded', function() { 
    var element = document.getElementById("sidebar-wrapper"); 
    element.parentNode.removeChild(element); 
    }); 
+0

你不能從父框架做到這一點。 –