Question

我正在尝试向我的SharePoint网页的正文中注入一些CSS作为背景图像。 .js本质上是这样的：

User

它可以按我的预期工作，除非中间有一个iFrame（或任何其他“ body”标签）。然后，图像被放入iFrame以及页面的正文中。这些iFrame本质上是弹出式窗口，每当您需要上载文档，更改网站上的某些设置等时，它们就会弹出。它们并非一直处于启动状态，但是无论如何我都不希望图像在那里。

当我打电话给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标签，或者会得到文档的主体。但这始终是1个项目的HtmlCollection数组。如果我使用document.getElementsByTagName('Body')

，也会发生相同的情况

所有body标记都具有相同的通用设置（document.body），无论它们是网站的实际Body标记还是iFrame的主体。

使用Javascript是否可以说“适用于主体，而不适用于其他任何主体”？

Answer 1

您的描述与文档相矛盾（请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/body）。您真的确定它的行为符合您的描述吗？您描述的行为并不是我作为开发人员所经历过的。您可以再次检查并可能更新此问题吗？

Answer 2

首先，调用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，则应该熟悉一下。

Answer 3

要进行更改，我只需要通过“网站设置”->“外观”将图像添加到页面的“外观”即可。快速简便，不需要任何代码...幸运的是。

将CSS应用于iFrame（或其他元素）之外的项目

3 个答案: