javascript - 分区 ID 和类

Question

我有一个实时聊天脚本。我的沙盒网站上的实时聊天固定在网站的右下角并随窗口滚动，但在我的实时网站(此特定代码来自的网站)上，它附加到页脚。

我在沙箱上使用的唯一代码是脚本和 div ID(顶部和底部，不是中间)。

这是我在我的实时网站上使用的:

<script type="text/javascript">
  (function() {
    var c = document.createElement('script');
    c.type = 'text/javascript'; c.async = true;
    c.src = "http://northamericahvac.smartertrack.com/ChatLink.ashx?config=0&id=stlivechat0";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(c,s);
  })();
</script>
<style>
  div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
  }
</style>
<div class="fixed">
  <div id="stlivechat0"></div>
</div>​

我添加的其余部分是为了尝试格式化实时聊天按钮。我希望它固定在右下角，以便它滚动而不是卡在右下角。

我读到您可以创建一个 div 类来格式化类中包含的内容，但它似乎没有扩展到 div id。 div id 是否已经具有格式并且正在覆盖 div 类？

我创建了一个小的 #73AD21 栏，看看它是否会保持固定，但即使这样也不会。

Answer 1

我会说你的问题与 CSS 无关。脚本错误，因为将任何 JavaScript 代码包装到

<script>
  ( javascript code here )()
</script>

表示:“将此代码视为一个函数，并在您处理它的那一刻运行它!”

这意味着它在 <div> 之前运行(放在它下面)被添加到页面。这意味着它不会找到带有 id="stlivechat0" 的 DOM 元素。 (它在链接内)。

很可能，您被建议放置这个 <script>在结尾前标记 </body>标记(或至少在 <div> 之后加上 id="stlivechat0" )。但你真的不必这样做:它的作者想要防止这类问题。事实上，您始终可以将代码放在命名函数中，稍后通过其名称调用该函数。

运行此类函数的典型时间是 window.onload事件(加载所有资源时)。另一个好的时刻是 document.ready (构建所有 DOM 时 - 注意并非所有脚本都可以在 document.ready 上运行 - 并非所有资源都已加载，包括脚本、样式表、图像或媒体。

但是，对于您的情况，最简单的解决方案就是将 <script> <div> 之后的标签:

<style>
  div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
  }
</style>
<div class="fixed">
  <div id="stlivechat0"></div>
</div>
<script type="text/javascript">
  ({
    var c = document.createElement('script');
    c.type = 'text/javascript'; c.async = true;
    c.src = "http://northamericahvac.smartertrack.com/ChatLink.ashx?config=0&id=stlivechat0";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(c,s);
  })();
</script>

请注意您的脚本无法在 StackOverflow 上运行(它被阻止，因为它未在 https:// 上提供服务)。

但是，如您所见，CSS 适用。

---

正如 Sebastian 在下面的评论中指出的，相当于将您的脚本放在 window.onload 上事件正在添加 defer属性:<script src="..." defer> .它由 above 95% 支持当前使用的浏览器。