将CSS样式添加到元素

Question

考虑一个具有类＆app-header＆＃39;的应用程序。和＆＃39; app-body＆＃39;。在应用正文中，我使用iframe标记显示另一个网页，该网页使用相同的应用标题＆＃39;我的应用使用的课程。需要停用＆＃39; app-header＆＃39;并只显示我的应用程序中嵌入的页面的主体。同时禁用app-header也不会禁用我的应用程序标头。

我的代码的简要概述。

我的计划是将 display：none 属性添加到app-header css中，以嵌入我应用中的网页。问题是如何单独为元素添加css（在我的情况下 - ＆＃39; display：none＆＃39;仅适用于iframe标记）。我还计划使用javascript，严格禁止使用PHP。

Answer 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?

Answer 2

iframe中的任何内容都不会受到你的css的影响，因为那会是一个安全问题 - 它以这种方式构建，所以随意使用你想要的任何样式，它们不会级联到iframe 。当然，除非您的iframe托管在同一个网址/域名中。