將CSS應用於iFrame（或其他元素）之外的項目
[英]Applying CSS to items outside of an iFrame (or other element)
問題描述
我正在嘗試為我的SharePoint網頁的正文注入一些CSS作為背景圖像。 .js本質上是這樣的：
document.getElementsByTagName( "Body" )[ 0 ].style.backgroundImage = <My Image URL>
document.getElementsByTagName( "Body" )[ 0 ].style.backgroundSize = "50%"
document.getElementsByTagName( "Body" )[ 0 ].style.backgroundPosition = "50% 50%"
而且它的工作方式符合我的期望，除非中間有一個iFrame（或任何其他“ body”標簽）。 然后，圖像被放入iFrame以及頁面的正文中。 這些iFrame本質上是彈出式窗口，每當您需要上載文檔，更改網站上的某些設置等時，它們就會出現。它們並不是一直都在運行，但是無論如何我都不想要那里的圖像。
當我調用document.getElementsByTagName('Body')我總是會得到當前正在運行的任何iFrame的Body標簽，否則我會得到文檔的主體。 但這始終是1個項目的HtmlCollection數組。 如果我使用document.body也會發生同樣的事情
所有body標記都具有相同的通用設置（ <body class="ms-backgroundImage" style="..." spellcheck="false"> ），無論它們是網站的實際Body標記還是iFrame的身體。
Javascript是否有辦法說“適用於主體，但不適用於任何其他主體”？
3 個解決方案
解決方案1
1 2018-08-21 19:31:34
您的描述與文檔相矛盾（請參閱https://developer.mozilla.org/en-US/docs/Web/API/Document/body ）。 您真的確定它的行為符合您的描述嗎？ 您描述的行為並不是我作為開發人員所經歷過的。 您可以再次檢查並更新此問題嗎？
解決方案2
0 2018-08-29 15:19:20
首先，調用getElementsByTagName時獲得HtmlCollection的原因是，該函數返回一個數組，而不管它是否匹配零個，一個或多個項目（請注意“元素”中的復數“ s”）。
不同的JS Web API“ get”功能很容易解釋，因為
getElementById（無復數s）返回單個DOM節點，而getElementsBy [Name | ClassName | TagName]均返回節點數組。
現在是您的主要問題：
通過iFrame，我認為您是指模態對話框？
SharePoint中的模式對話框有一個共同點，那就是它們都具有url參數“＆IsDlg = 1”。 這意味着您可以檢查您是否在對話框中，並讓您的代碼相應地執行。
這是您要查找的代碼，它將您的樣式應用於所有非模式頁面。
// could have used GetUrlKeyValue("IsDlg") === "1",
// but not sure if sp.js is loaded, so this is safer
var isDialog = document.location.search.indexOf("IsDlg=1") > -1;
// for non-dialog pages
if(!isDialog) {
var docBody = document.body;
// if for some crazy reason document.body returns an array??
if(document.body.length) { docBody = document.body[0] }
// styling
docBody.style.backgroundImage = "[Your Image URL]";
docBody.style.backgroundSize = "50%";
docBody.style.backgroundPosition = "50% 50%";
}
PS：在SharePoint的較新版本（> 2007）中，不建議自定義母版頁。 還有幾種其他方法（例如CustomActions ）可自定義平台，而無需觸及即用的母版頁，如果您想專業地使用sharepoint，則應熟悉這些方法。
解決方案3
0 2018-08-29 17:41:33
要進行更改，我只需要通過“網站設置”->“外觀”將圖像添加到頁面的“外觀”即可。 快速簡便，不需要任何代碼...謝天謝地。
在iFrame中應用CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.