頁面完全加載前如何觸發onclick
[英]How to trigger onclick before page is fully loaded
問題描述
我的網站本質上是一個非常長的頁面，在加載頁面之前，我想單擊一個元素（因為它很長，所以需要一段時間），但我無法觸發它。
為了測試可能導致問題的原因，我制作了一個非常基本的按鈕，該按鈕在單擊時寫入控制台，在加載階段它什么也沒做，然后在所有內容完全加載后才起作用。
奇怪的是，查找可能的解決方案是這個問題，人們一致表示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>
有誰能解釋為什么它的行為方式以及是否有任何辦法可以改變它？
2 個解決方案
解決方案1
1 已采納 2018-12-11 08:55:08
使用按鈕時，可以使用此方法。
"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
1 2018-12-11 09:13:18
編碼！
$(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解釋器上工作，然后該javascript解釋器將最終運行腳本。 直到腳本執行完成后，HTML才會繼續運行，以防萬一您在某處具有“ document.ready”功能。 這是默認行為。
在編寫其余部分時，請假設您已經了解其余代碼的功能。
onclick需要單獨的功能。 但是正如我所說，腳本將在頁面完全加載之前加載。 因此，您可以先進行onclick工作。 但是，由於該button尚未加載，因此您無需單擊任何內容。
解決問題的另一種方法。
function test() { console.log("testingtesting"); }
button { height: 80px; width: 80px; }
<button id="buttonName" onclick="test()"/>
不同於您的腳本document.getElementById("buttonName").onclick = test; 在DOM的<button id="buttonName" onclick="test()"/>調用此函數，因此onclick不需要另一行。
進一步閱讀
如何在頁面完全加載之前將jQuery效果應用於元素？
[英]How to apply a jQuery effect to an element before page is fully loaded?
如何在頁面完全加載 Selenium 和 JavaScript 之前單擊元素
[英]how to click element before page is fully loaded with Selenium and JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.