javascript - 在较小的屏幕上隐藏 JavaScript

Question

我正在将我的网站设置为响应式，并且我想知道当屏幕尺寸小于 700 像素时如何隐藏我的实时聊天 JavaScript。

我当前的实时聊天 JavaScript 是，

<script type="text/javascript">

function wsa_include_js(){
  var wsa_host = (("https:" == document.location.protocol) ? "https://" : "http://");
  var js = document.createElement("script");

  js.setAttribute("language", "javascript");
  js.setAttribute("type", "text/javascript");
  js.setAttribute("src",wsa_host + "tracking-v3.websitealive.com/3.0/?objectref=wsa3&groupid=12581&websiteid=0");

  document.getElementsByTagName("head").item(0).appendChild(js);
}

if (window.attachEvent)
  window.attachEvent("onload", wsa_include_js);
else if (window.addEventListener)
  window.addEventListener("load", wsa_include_js, false);
else 
  document.addEventListener("load", wsa_include_js, false);
</script>

有人可以告诉我怎么做吗？谢谢

Answer 1

这实际上可以通过 CSS 媒体查询轻松解决，但是我需要知道如何将 LiveChat 添加到 HTML 中，以便为您提供一个好的答案。

您想要做的是获取保存聊天窗口的 div 的类或 ID，并将以下内容添加到您的 CSS 文件中:

@media screen and (max-width: 700px) {
    #LiveChatContainerID { display: none; }
}

或

@media screen and (max-width: 700px) {
    .LiveChatContainerClass { display: none; }
}

如果 LiveChat 要求您向网站添加 iframe，只需将 iframe 封装在具有唯一 ID 或类的 div 标签中，并在 CSS 中使用上述内容即可。

编辑:

看到您的网站后，我想我有一个可以正常工作的解决方案:

@media screen and (max-width: 700px) {
    .wsa_window, .wsa_window_close { display: none !important; }
}

需要“!important”来覆盖 javascript 直接在元素上放置的样式，但在检查器中执行此操作似乎可以正常工作，而无需删除页面上的其他任何内容。

希望这有帮助!