Div ID和Class

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>标记之前（或至少在{{之后） 1}}与<div>）。但你真的不必：它的作者想要防止这类问题。实际上，您始终可以将代码放在命名函数中，稍后通过其名称调用此函数。

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

但是，在您的情况下，最简单的解决方案就是将document.ready标记放在<script>之后：

<div>

请注意您的脚本无法在StackOverflow上运行（它被阻止，因为它不在<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>上提供）。

但是，正如您所看到的，CSS适用。

正如塞巴斯蒂安在下面的评论中指出的那样，相当于将脚本放在https://事件上，就是在其中添加window.onload属性：defer。目前使用的浏览器above 95%支持它。