将 CSS 样式添加到元素答案

【问题标题】：Add CSS styles to an element将 CSS 样式添加到元素
【发布时间】：2016-02-23 23:34:33
【问题描述】：

考虑一个具有“app-header”和“app-body”类的应用程序。在应用程序的正文中，我使用了一个 iframe 标记，该标记显示另一个网页，该网页使用我的应用程序使用的相同“应用程序标头”类。需要禁用“app-header”并只显示嵌入在我的应用程序中的页面正文。同样禁用应用程序标头不会禁用我的应用程序的标头。

我的代码的简要概述。

我的计划是将 display:none 属性添加到我的应用程序中嵌入的网页的 app-header css 中。问题是如何单独为元素添加 css（在我的情况下 - 'display:none' 仅适用于 iframe 标记）。另外我打算使用 javascript 并且严格不使用 PHP。

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

我假设这是一个问题的原因是因为 iframe 源和页面本身都使用相同的 HTML。在检查页面是否是顶部框架后，您可以在页面头部添加样式表：

// shamelessly jacked from https://stackoverflow.com/questions/11833759/add-stylesheet-to-head-using-javascript-in-body
if(self !== top) {
    var head = document.head
      , link = document.createElement('link')

    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = '/path/to/additional/stylesheet.css'

    head.appendChild(link)
}

Add stylesheet to Head using javascript in body
How to tell if current frame is parent?

【讨论】：

【解决方案2】：

iframe 中的任何内容都不会受到您的 css 的影响，因为这将是一个安全问题 - 它是这样构建的，因此您可以随意使用您想要的任何样式，并且它们不会级联到 iframe。当然，除非您的 iframe 托管在同一个 url/域中。

【讨论】：

所以@Jamie，你的意思是说不可能？
在你没有托管 iframe 的情况下是正确的。
Okie @Jamie。上述问题的任何其他解决方案，以便我可以拉入网页的一部分（即
元素）并在我的应用程序中进行项目？
抱歉，如果您不控制通过iframe 拉入的页面，那么您无能为力。想象一下，如果有人想要您的网页在他们的网页中，因为它可能非常受欢迎等，但不希望您的徽标出现在标题中并且可以将其删除。如果您需要他们的一些内容，如果他们提供此服务，您可以要求他们提供api？希望这对您来说是正确的答案。