วิธีการเรียกใช้ฟังก์ชั่นเมื่อโหลดหน้าเว็บแล้ว

246

ฉันต้องการเรียกใช้ฟังก์ชั่นเมื่อโหลดหน้าเว็บ แต่ไม่ต้องการใช้ใน<body>แท็ก

ฉันมีสคริปต์ที่ทำงานถ้าฉันเริ่มต้นใน<body>แบบนี้:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

แต่ฉันต้องการเรียกใช้โดยไม่ต้อง<body onload="codeAddress()">และฉันได้ลองสิ่งต่าง ๆ มากมายเช่นนี้:

window.onload = codeAddress;

แต่มันไม่ทำงาน

ดังนั้นฉันจะเรียกใช้เมื่อโหลดหน้าได้อย่างไร

javascript html onload

— Claes Gustavsson
แหล่งที่มา

คุณกำลังวิ่งwindow.onload = codeAddressตามที่codeAddress()กำหนดไว้หรือไม่? ถ้าเป็นเช่นนี้ควรทำงาน คุณแน่ใจหรือว่าไม่มีข้อผิดพลาดที่อื่น?

— Skilldrick

มันไม่สมเหตุสมผลเลย window.onload ทำงานหลังจากโหลดหน้าและมีจาวาสคริปต์ทั้งหมดดังนั้นฟังก์ชั่น codeAddress () สามารถประกาศได้ทุกที่ภายในหน้าหรือไฟล์ js ที่เชื่อมโยง ไม่จำเป็นต้องมาก่อนเว้นแต่จะมีการเรียกในระหว่างการโหลดหน้า

— Jared Farrish

@ Jared ใช่แล้ว มีลักษณะที่jsfiddle.net/HZHmc มันไม่ทำงาน แต่ถ้าคุณย้าย window.onload ไปหลังจาก definition: jsfiddle.net/HZHmc/1มันจะทำงาน

— Skilldrick

การประกาศฟังก์ชั่นโดยทั่วไปจะถูกยกขึ้นไปด้านบนของขอบเขตดังนั้นฟังก์ชั่นสามารถประกาศได้ทุกที่ในขอบเขตที่สามารถเข้าถึงได้

— Russ Cam

4

เบราว์เซอร์ยอดนิยมทั้งหมดสามารถแสดงข้อผิดพลาดจาวาสคริปต์ - คุณได้รับหรือไม่?

— Christoph

354

window.onload = codeAddress;ควรทำงาน - นี่คือตัวอย่างและรหัสเต็ม:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

ขยายตัวอย่างข้อมูล

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

ขยายตัวอย่างข้อมูล

— ดารินดิมิททรอฟ
แหล่งที่มา

3

ดังที่ฉันพูดในคำตอบของฉันไม่มีอะไรผิดปกติกับรหัสตามที่เห็น - เหตุผลที่ใช้ไม่ได้ต้องเป็นข้อผิดพลาดใน JS บางแห่ง

— Skilldrick

หากคุณใส่ย่อหน้าที่มีข้อความไว้ในเนื้อความมันจะไม่โหลดจนกว่าคุณจะคลิกตกลง

— FluorescentGreen5

ตัวจัดการเหตุการณ์ระดับโลกนี้มีให้บริการเฉพาะใน Chrome developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/

— ......

177

แทนที่จะใช้ jQuery หรือ window.onload native JavaScript ได้นำฟังก์ชั่นที่ยอดเยี่ยมมาใช้นับตั้งแต่เปิดตัว jQuery เบราว์เซอร์สมัยใหม่ทั้งหมดมีฟังก์ชั่น DOM พร้อมของตัวเองโดยไม่ต้องใช้ห้องสมุด jQuery

ฉันจะแนะนำสิ่งนี้ถ้าคุณใช้ Javascript ดั้งเดิม

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

— สเปนเซอร์พฤษภาคม
แหล่งที่มา

4

(noob คำถาม: สิ่งที่จะfalseทำอย่างไร)

— ᔕᖺᘎᕊ

7

@ ᔕᖺᘎᕊสำหรับคุณสมบัติ 'ฟองสบู่' (ซึ่งคุณไม่จำเป็นต้องใส่ฉันแค่เติม booleans ทั้งหมดเพื่อนิสัยที่ดี) นอกจากนี้ยังมีคำสั่งบูลีนอีกคำสำหรับคุณสมบัติ 'ยกเลิกได้' แต่ไม่ได้มีประโยชน์มากเนื่องจากคำสั่งด้านบนไม่สามารถยกเลิกได้ อ่านเพิ่มเติมได้ที่นี่: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer พฤษภาคม

1

นี่คือสิ่งที่ฉันกำลังมองหาตอนนี้ :) ดำเนินการเมื่อ DOM เสร็จสมบูรณ์เพื่อให้คุณสามารถจัดการได้ไม่ใช่เมื่อเบราว์เซอร์ระบุว่า "โหลดหน้าเว็บโดยสมบูรณ์" ซึ่งอาจใช้เวลาหลายวินาทีขึ้นอยู่กับสิ่งภายนอก (เช่นโฆษณา)

— Nathanyel

คำถาม noob เล็กน้อยจะเกิดอะไรขึ้นถ้าคุณไม่รู้ว่าหน้าเว็บโหลดหรือไม่ แก้ไข: Ah: document.readyState

— Brian Hannay

1

@ x-yuri "เหตุการณ์ DOMContentLoaded ถูกเรียกใช้เมื่อเอกสารได้รับการโหลดอย่างสมบูรณ์และแยกวิเคราะห์โดยไม่ต้องรอสไตล์ชีตรูปภาพและเฟรมย่อยจนเสร็จสิ้นการโหลด (เหตุการณ์โหลดสามารถตรวจจับหน้าที่โหลดเต็ม)" - stackoverflow.com/questions/2414750/…

— Spencer พฤษภาคม

46

ใช้คำตอบของดาริน แต่สไตล์ jQuery (ฉันรู้ว่าผู้ใช้ขอจาวาสคริปต์)

เล่นซอ

$(document).ready ( function(){
   alert('ok');
});

— กินที่โจ
แหล่งที่มา

4

คำตอบของคุณสอนให้ฉัน แต่ไม่เกี่ยวกับ jQuery / javascript

— unicorn2

2

@VijayKumar นี่คือ jQuery ไม่ใช่ Javascript ดั้งเดิมดังนั้นคุณต้องมี jQuery ไลบรารี่เพื่อให้ใช้งานได้

— Spencer May

30

ทางเลือกอื่น ฉันชอบสิ่งนี้เพื่อความกระชับและความเรียบง่ายของโค้ด

(function () {
    alert("I am here");
})();

นี่คือฟังก์ชั่นที่ไม่ระบุชื่อโดยที่ไม่ได้ระบุชื่อ สิ่งที่เกิดขึ้นที่นี่คือฟังก์ชั่นถูกกำหนดและดำเนินการร่วมกัน เพิ่มสิ่งนี้ไปยังจุดเริ่มต้นหรือจุดสิ้นสุดของเนื้อหาทั้งนี้ขึ้นอยู่กับว่าจะต้องดำเนินการก่อนที่จะโหลดหน้าเว็บหรือไม่นานหลังจากที่โหลดองค์ประกอบ HTML ทั้งหมด

— habeeb
แหล่งที่มา

1

นี่เป็นรหัสเดียวที่ทำงานกับ HTML Preview สำหรับ GitHub: htmlpreview.github.io รหัสอื่น ๆ ในขณะที่ถูกต้องจะถูกทำลายโดย HTML Preview นี้

— Jason Doucette

1

บางคนสามารถอธิบายได้ว่าสิ่งนี้แตกต่างจากการวางแท็กสคริปต์ที่ท้ายหน้า HTML และวัตถุประสงค์ของฟังก์ชันที่ไม่ระบุชื่อหรือไม่

— Pat-Laugh

10

window.onload = function() { ... ฯลฯ ไม่ใช่คำตอบที่ดี

สิ่งนี้มีแนวโน้มว่าจะใช้งานได้ แต่จะแบ่งฟังก์ชันอื่นใดที่เชื่อมโยงกับเหตุการณ์นั้นอยู่แล้ว หรือถ้าฟังก์ชั่นอื่นเข้ามาเกี่ยวข้องกับเหตุการณ์นั้นหลังจากคุณแล้วมันจะทำให้คุณแตก ดังนั้นคุณสามารถใช้เวลาหลายชั่วโมงในภายหลังเพื่อหาสาเหตุว่าทำไมบางอย่างที่ทำงานไม่ได้อีกต่อไป

คำตอบที่มีประสิทธิภาพมากขึ้นที่นี่:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

ฉันใช้รหัสบางอย่างฉันลืมที่ฉันพบว่าให้เครดิตผู้เขียน

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

หวังว่าจะช่วย :)

— จะ
แหล่งที่มา

ขอบคุณที่ให้ข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับonloadการใช้งาน

— CybeX

4

ลองเปลี่ยนการอ่าน

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

โดยที่รัฐอยู่:

loading - เอกสารกำลังโหลด (ไม่มีข้อมูลโค้ด)
แบบโต้ตอบ - เอกสารถูกแยกวิเคราะห์ใช้ก่อนDOMContentLoaded
เสร็จสมบูรณ์ - มีการโหลดเอกสารและทรัพยากรเริ่มก่อนwindow.onload

แสดงตัวอย่างโค้ด

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

ขยายตัวอย่างข้อมูล

— Kamil Kiełczewski
แหล่งที่มา

3

ดูสคริปต์ domReadyที่อนุญาตให้ตั้งค่าหลายฟังก์ชั่นเพื่อดำเนินการเมื่อโหลด DOM แล้ว โดยพื้นฐานแล้วสิ่งที่ Dom พร้อมทำในไลบรารี JavaScript ที่ได้รับความนิยมมากมาย แต่มีน้ำหนักเบาและสามารถนำไปใช้และเพิ่มเมื่อเริ่มต้นไฟล์สคริปต์ภายนอกของคุณ

ตัวอย่างการใช้งาน

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

— รัสแคม
แหล่งที่มา

0

window.onload จะทำงานดังนี้:

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>

ขยายตัวอย่างข้อมูล

— Rudra
แหล่งที่มา