使用Javascript隱藏具有特定類別的標記<iframe>使用Javascript

Question

我需要使用上載嵌入式可視模板（在Tableau中創建），以便客戶端可以實時查看它。但是，在Tableau模板的底部，有幾個按鈕（特別是「共享」，「記住我的更改」和「編輯」[see screenshot here]），我想隱藏它們，因爲它與客戶端無關;儘管如此，我仍想保留其他按鈕，例如「導出」，「刷新」等。

我發現了一個包裝這些按鈕的元素是<span class="tab-fill-left">

這在很大程度上嵌套多個的和其它的HTML標籤。我最初的想法是追加<script>標籤是這樣的：

<script type="text/javascript"> 
document.getElementsByClassName("tab-fill-left").style.display = "none"; 
alert('hello'); 
</script> 

右後（如下圖），我有我的公司進入到系統中嵌入的數據可視化頁面。

<iframe id="tableau_content" src="https://tableau-proxy.insidemedia.net/?site_id=MyCompanyProject&tableau_view=/views/MyCompanyEdition/Home%3F:embed=Yes%26:tabs=No%26:toolbar=Yes%26:display_share=No" width=100%" height="100%" style="border: none; "> 
</iframe> 

但是，我附加的JavaScript似乎沒有任何效果，當頁面重新加載。有沒有辦法通過在其後面附加另一個Javascript標記來影響出現在下的元素？或者有什麼方法讓我隱藏Tableau中的「共享」，「記住我的更改」和「編輯」按鈕？看起來好像there are a few people誰在這種情況下使用Tableau遇到同樣的問題，並且他們提出的任何建議都不適用於我（我按照僱主的要求使用Tableau 8.x）。

謝謝！

Answer 1

如果加載到iframe中的頁面與父框架不在同一個域中，那麼使用JavaScript或CSS是不可能的。

這是在Web瀏覽器上實施的一項安全功能，用於防止XSS（跨站點腳本）。

Answer 2

好，即使在同一個域中，這將不起作用：

document.getElementsByClassName("tab-fill-left").style.display = "none"; 

上面給出了一個HTMLCollection。所以你需要這樣做：

document.getElementsByClassName("tab-fill-left")[0].style.display = "none"; 
//----------------------------------------------^^^ 

希望你明白。