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

244

ตามเนื้อผ้าหากต้องการเรียกใช้ฟังก์ชัน JavaScript เมื่อโหลดหน้าเว็บแล้วคุณจะต้องเพิ่มonloadแอตทริบิวต์ลงในเนื้อหาที่มี JavaScript เล็กน้อย (โดยปกติจะเรียกใช้ฟังก์ชันเท่านั้น)

<body onload="foo()">

เมื่อโหลดหน้าเว็บแล้วฉันต้องการเรียกใช้รหัส JavaScript เพื่อเติมข้อมูลบางส่วนของหน้าเว็บด้วยข้อมูลจากเซิร์ฟเวอร์ ฉันไม่สามารถใช้onloadแอตทริบิวต์ได้เนื่องจากฉันใช้แฟรกbodyเมนต์JSP ซึ่งไม่มีองค์ประกอบที่ฉันสามารถเพิ่มแอททริบิวต์ได้

มีวิธีอื่นในการเรียกใช้ฟังก์ชัน JavaScript ขณะโหลดหรือไม่ ฉันไม่ควรใช้ jQuery เพราะฉันไม่ค่อยคุ้นเคย

javascript onload

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

15

btw: มันคือจาวาสคริปต์; Java เป็นภาษาและ Javascript อื่น ไม่มีสิ่งเช่นสคริปต์จาวา FYI

— Yanick Rochon

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

— STW

388

หากคุณต้องการให้วิธี onload ใช้พารามิเตอร์คุณสามารถทำสิ่งที่คล้ายกับสิ่งนี้:

window.onload = function() {
  yourFunction(param1, param2);
};

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

— แมตต์ซีเคอร์
แหล่งที่มา

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

— Stefan Kendall

4

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

— Matt Sieker

2

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

— Stefan Kendall

และฉันสามารถเรียกฟังก์ชั่น yourfunction ครั้งที่สองของคุณโดยใช้ปุ่มเหตุการณ์ onclick ได้หรือไม่

— Faizan

73

อีกวิธีหนึ่งในการทำเช่นนี้คือการใช้ตัวรับฟังเหตุการณ์นี่เป็นวิธีที่คุณใช้:

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

คำอธิบาย:

DOMContentLoadedหมายความว่าเมื่อ DOM Objects ของเอกสารถูกโหลดและมองเห็นโดย JavaScript แล้วสิ่งนี้อาจเป็น "คลิก", "โฟกัส" ...

ฟังก์ชั่น ()ฟังก์ชั่นไม่ระบุชื่อจะถูกเรียกเมื่อเหตุการณ์เกิดขึ้น

— Ahmed Jolani
แหล่งที่มา

5

โปรดทราบว่าสิ่งนี้จะไม่ทำงานใน IE 8 และที่ต่ำกว่า มิฉะนั้นนี่เป็นวิธีแก้ปัญหา JS ที่ดีที่สุด!

— ฟิลิปป์

46

คำถามดั้งเดิมของคุณไม่ชัดเจนโดยสมมติว่าการแก้ไข / การตีความของเควินนั้นถูกต้องดังนั้นตัวเลือกแรกนี้จะไม่นำมาใช้

ตัวเลือกทั่วไปกำลังใช้onloadงานเหตุการณ์:

<body onload="javascript:SomeFunction()">
....

คุณสามารถวางจาวาสคริปต์ของคุณไว้ที่ส่วนท้ายสุดของร่างกาย มันจะไม่เริ่มดำเนินการจนกว่าเอกสารจะเสร็จสมบูรณ์

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

และตัวเลือกอื่นคือการพิจารณาใช้เฟรมเวิร์ก JS ซึ่งทำสิ่งนี้ภายใน:

// jQuery
$(document).ready( function () {
  SomeFunction();
});

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

javascript:ในonloadไม่จำเป็นแม้จะไม่เป็นอันตราย

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>ให้Uncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

หรือกับ jQuery หากคุณต้องการ:

$(function(){
   yourfunction();
});

หากคุณต้องการโทรมากกว่าหนึ่งฟังก์ชั่นในการโหลดหน้าให้ดูที่บทความนี้สำหรับข้อมูลเพิ่มเติม:

การใช้ฟังก์ชั่นโหลด JavaScript หลายรายการ

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

3

นี่ไม่ถูกต้องฟังก์ชั่นจะดำเนินการและกำหนดสิ่งที่มันจะกลับสู่ onload () ไม่ควรอยู่ที่นั่น

— epascarello

1

หากมีฟังก์ชั่นอื่น ๆ ที่ฟังเหตุการณ์ onload สิ่งนี้จะพัดพาพวกเขาไป ดีกว่าที่จะเพิ่มฟังเหตุการณ์มากกว่ากำหนดจัดการเหตุการณ์โดยตรง แม้ในกรณีนี้คุณจะกำหนดเป็น `window.onload = yourfunction 'โดยไม่ต้องปิดฟังก์ชั่นไม่ใช่วิธีที่คุณมี วิธีการของคุณพยายามที่จะดำเนินการฟังก์ชั่นของคุณ () ในเวลาที่ได้รับมอบหมาย

— Robusto

ที่จะกำหนดค่าตอบแทนของฟังก์ชั่นให้กับ window.onload ซึ่งจะไม่ทำงานเว้นแต่ค่าตอบแทนเป็นฟังก์ชั่น

— I.devries

@epascarello: จับดีคงที่คุณเห็นนิสัยเมื่อเขียนชื่อฟังก์ชั่น ขอบคุณ

— Sarfraz

1

window.onload = yourfunction; ปัญหาด้วยวิธีนี้คือมันไม่ได้รับการยอมรับพารามิเตอร์ fucntion !!

— palAlaa

8

<!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>

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

— ไม่ระบุชื่อ
แหล่งที่มา

3

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

— _that_you're_a_web_developer

8

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

ลองรหัสด้านล่าง:

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— Amir Md Amiruzzaman
แหล่งที่มา

6

นี่คือเคล็ดลับ (ทำงานได้ทุกที่):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

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

1

สำหรับตรวจจับการโหลด html (จากเซิร์ฟเวอร์) ที่ใส่เข้าไปในการใช้งาน DOM MutationObserverหรือตรวจจับช่วงเวลาในฟังก์ชั่น loadContent ของคุณเมื่อข้อมูลพร้อมใช้งาน

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

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

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

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