javascript - 如何强制隐藏在我的页面上呈现的 div？

Question

我整合了tlk.io我页面上的聊天 API

根据要求，我的目标是隐藏那个标题栏，并保留其余部分。

---

我使用 Google Chrome 工具进行检查，我得到了这个:

我也抢了这个

<header id="header" class="header">
  <div class="header-bar">
      <a class="header-avatar" href="http://tlk.io">tlk.io</a>
    <span id="channel" class="header-channel">keystone</span>
    <span class="header-status is-hidden" title="Online"></span>
  </div>
</header>

---

我试过 CSS

       <style type="text/css">
        #header.header-bar{
          display: none;
        }

        </style>

---

JS

<script>
$('#header.header').hide();
console.log('Run');
</script> 

我在控制台上显示了 run 这个词，但那个横幅仍然在那里。

有什么提示吗？我做错了什么 ？有可能做到吗？

Answer 1

tlk.io 嵌入代码似乎使用了 iframe。

由于 same-origin policy ，您将无法影响其内容。

编辑:看起来他们让您通过他们的嵌入工具注入(inject)自定义 CSS 文件。但是，使用它来更改界面或删除他们的品牌可能会让您关闭。