Question

您好，我已经使用html和JavaScript（ajax）建立了聊天系统。

聊天室中加载了很多消息，它直接出现在页面上。

因此，我试图设计一种使用以下功能在聊天页面的加载时向下滚动聊天消息的方法。

<script>
  function scrolldown() {
    var box = document.getElementById('chatmessagecontainer');
    box.scrollTop = box.scrollHeight;
  }
</script>

但是onload方法永远不会触发此功能，

<body onload="scrolldown()">

但是，我注意到在按下按钮时会触发该功能，如下所示

<input type="button" id="sub" onclick="scrolldown()" name="click" value="click" />

消息通过以下功能以ID为“ #display_info”的形式加载到聊天容器中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<script type="text/javascript">
  setInterval(loaddata, 1000);

  function loaddata() {
    var msgid = document.getElementById('msgid');

    if (msgid) {
      $.ajax({
        type: 'post',
        url: 'load.php',
        data: {
          msgid: msgid.value,
        },

        success: function(response) {
          // We get the element having id of display_info and put the response inside it
          $('#display_info').html(response);
        },
      });
    } else {
      $('#display_info').html('Please Enter Some Words');
    }
  }
  </script>

为什么onload方法不能运行我的函数？

Answer 1

通过将其内容包装在setTimeout调用中，尝试延迟执行功能（例如2秒）。我怀疑也许所有页面元素在DOM上都可用，但尚未绘制。

更新：尽管setTimeout是一种可行的方法，但它基本上是一个技巧。请注意，理想情况下，在尝试滚动之前，您应该观看该元素并确保其可用和/或包含子元素。您可以使用Mutation Observer。希望对您有所帮助。

onload方法拒绝使用javascript触发我的页面上的功能

1 个答案: