javascript - 如何隐藏可打印版本的 TidioChat 侧边栏？

Question

上下文

我有一个包含食物食谱的网站，该网站具有由专用 CSS 设置样式的可打印 View 。

<link rel="stylesheet" href="css/front/print-recipe.css" media="print">

show-recipe View 还加载了一个 TidioChat为用户支持加载的支持小部件。

问题

加载可打印版本时，页面预览会加载打印就绪的布局，其中包括聊天小部件，它覆盖了页面的部分内容(实际的食谱说明)。

尝试过的方法

• 我曾尝试使用 javascript 以编程方式禁用小部件，但是这种方法变得非常棘手，需要在打印预览后重新启用它。我认为这有点脏，无论如何我都无法让它按预期工作。

• 我还尝试将自定义覆盖样式 ( display:none ) 添加到 .sidebar-content 类中.运气不好，仍然显示。 Screenshot

• 我还联系了 TidioChat 支持人员。他们的回答是没什么可做的:我已经和我们团队的一位开发人员谈过，恐怕我们目前无能为力；那是因为页面的可打印版本主要由您使用的浏览器决定，我们对此无法控制。对此我真的很抱歉。但是，我相信一定有一种方法可以覆盖默认 CSS 并让它对打印媒体隐藏。

额外信息

• 我已经使用 Google Chrome 和 Firefox 进行了这些试验，两者在侧边栏聊天小部件方面的行为相似。

链接到实际页面

这里是example real link with the actual problem .

---

感谢任何可能的帮助/提示。我将根据需要更新此问题帖子，并提供任何缺失的信息。

Answer 1

.sidebar-content在 Tidio 中 iframe因此，由于 same-origin，您无法对其进行任何样式更改。政策。

但是您可以隐藏整个 Tidio iframe通过隐藏包含 <div id="tidio-chat">通过将以下内容添加到您的 print-recipe.css :

#tidio-chat {
    display: none;
}