javascript - 仅当在 iframe 或灯箱中查看网站时才添加某些 CSS 样式

Question

每当在 iframe/lightbox 中查看我的网站时，我想删除我的页眉/页脚。我在网上搜索了一下，得出以下代码:

if (window.top!=window.self)
    {
  // In a Frame or IFrame
echo "<style> 
         .sticky-wrapper{ display: none !important;} 
         .header-contact-bar {display: none !important;}
         #as.footer { display: none !important;}
      </style>";
    }
    else
    {
  // Not in a frame
    } 

Lightbox 中的 CSS 也发生了变化，我的网站上也发生了变化。问题是。我不明白为什么当我不在灯箱/iframe 中时它也会添加 css。

1. 我是不是在用代码做些什么？

2. 代码是否有效？

3. 我是否必须在 else 语句中添加一些内容？

4. 是的。什么？

Answer 1

在困惑了很久之后找到了我自己的解决方案。

<script>

        if( self != top ) {
   headTag = document.getElementsByTagName("head")[0].innerHTML;
   var frameCSS = headTag + '<style type="text/css">.sticky-wrapper{ display: none !important;}  .header-contact-bar {display: none !important;} #as.footer { display: none !important;}</style>';
   document.getElementsByTagName('head')[0].innerHTML = frameCSS;
}
  </script>