如何在页面完全加载之前触发onclick答案

【问题标题】：How to trigger onclick before page is fully loaded如何在页面完全加载之前触发onclick
【发布时间】：2018-12-11 08:07:53
【问题描述】：

我的网站基本上都是一个很长的页面，我有一个想要在页面加载之前点击的元素（它需要一段时间，因为它太长了），但我无法触发它.

为了测试可能导致问题的原因，我制作了一个非常基本的按钮，该按钮在单击时会写入控制台，并且在加载阶段它什么也不做，然后最终在所有内容完全加载后就可以工作了。

奇怪的部分是寻找可能的解决方案，所以这个问题，人们一致认为 javascript 会在代码中写入的任何行加载，并且指向我的 .js 文件的链接是第二件事（紧随其后）所以它肯定应该立即加载。

这显然不是完整的代码，因为该网站很长，但以下是相关部分：

    "use strict";
    
    function test() {
    	console.log("testingtesting");
    }
    
    function init() {
        document.getElementById("buttonName").onclick = test;
    }
    
    window.onload = init;

    <head>
	   <title>Title</title>
	   <script src="script.js"></script>
    </head>

    <body>
       <button id="buttonName">
    </body>

有没有人解释它为什么会这样，如果我能做些什么来改变它？

【问题讨论】：

你必须分享你的代码，否则没有人可以帮助你
欢迎来到 SO ;) 请在how to ask a good question 阅读这篇文章。这将包括对您要实现的目标的正确描述、您的代码（或相关的 sn-ps）以及显示您迄今为止尝试过的内容和可能的错误消息的努力。还建议提供完整的MCVE..
代码本身很长，所以我只是添加了相关部分
见：stackoverflow.com/questions/588040/…。搜索 window.onload 时发现的第一件事
请分享更多信息。如果您触发按钮事件，那么它将在加载时触发。 $("#buttonId").trigger('click');谢谢

标签： javascript

【解决方案1】：

使用按钮时，您可以使用此方法。

"use strict";
    
    function test() {
    	console.log("testingtesting");
    }

<head>
	   <title>Title</title>
	   <script src="script.js"></script>
    </head>

    <body>
       <button id="buttonName" onclick="test()"/>
    </body>

如果您确实想在加载后立即启动该函数，您可以尝试使用自调用函数。

(function () {
  // body of the function
}());

【讨论】：

谢谢！这样可行！不完全明白为什么，但是当它起作用时，它起作用了

【解决方案2】：

密码！

$(document).ready(function() {
  test();
  
  $("#buttonName").click(function() {
    test();
  });
  
  function test() {
    console.log("testtest");
  }
});

button {
  height: 80px;
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="buttonName">

它是如何工作的。

你问的问题很有趣。我用过jquery。一个 JavaScript 库，使大多数功能变得更容易。

首先。您的脚本所在的位置实际上并不重要（太多）。如果重要并且需要从一开始就运行，有些人会将它放在头上。

但是，在大多数情况下，您可以将 javascript 放在结束 body 标记之前。对于 SEO，这是 google 认可的。

$(document).ready(function() 一旦页面准备好，这里的函数就会被调用。或者是吗？您会惊讶地发现，事实上，在页面完全加载之前停止脚本加载对您来说更难。 :)

当浏览器在解析 HTML 时遇到脚本标签时，它会停止解析并开始使用 javascript 解释器，然后最终运行脚本。在脚本执行完成之前，html 不会继续，以防万一您在某处有一个“document.ready”函数。这是默认行为。

在您编写其余部分时，假设您已经了解其余代码的作用。

onclick 需要一个单独的函数。但正如我所说，脚本将在页面完全加载之前加载很多。所以你可以让onclick 之前工作。但是，由于 button 尚未加载，因此您没有可点击的内容。

解决问题的另一种方法。

    function test() {
    	console.log("testingtesting");
    }

button {
  height: 80px;
  width: 80px;
}

&lt;button id="buttonName" onclick="test()"/&gt;

不像你的脚本document.getElementById("buttonName").onclick = test;这个函数在DOM中被调用<button id="buttonName" onclick="test()"/> 因此，onclick 不需要另一行。

进一步阅读

https://api.jquery.com/

https://www.innoq.com/en/blog/loading-javascript/

http://www.bardev.com/2013/01/03/browser-script-loading/

【讨论】：

非常彻底，谢谢！我已经看到使用 jquery 的响应，但我希望我的布局尽可能精简，因为内容本身非常庞大，所以我没有使用 jquery。我应该指定我正在寻找一个纯 js 解决方案。其他人还建议将 onclick 添加到按钮标签本身中，并且非常成功
没问题:)。为了安全起见，我添加了 javascript 版本。 Jquery 是一个不错的库。我不知道有人已经回答了你的问题。我喜欢解释为什么我做了一些事情。不只是“Heres 代码的粉丝。它有效。处理它。”