Làm cách nào để gọi hàm JavaScript khi tải trang?

244

Theo truyền thống, để gọi một hàm JavaScript khi trang đã được tải, bạn sẽ thêm một onloadthuộc tính vào phần thân chứa một chút JavaScript (thường chỉ gọi một hàm)

<body onload="foo()">

Khi trang đã được tải, tôi muốn chạy một số mã JavaScript để tự động điền các phần của trang với dữ liệu từ máy chủ. Tôi không thể sử dụng onloadthuộc tính vì tôi đang sử dụng các đoạn JSP, không có bodyphần tử nào tôi có thể thêm thuộc tính.

Có cách nào khác để gọi một hàm JavaScript khi tải không? Tôi thà không sử dụng jQuery vì tôi không quen lắm với nó.

javascript onload

— lòng bàn tay
nguồn

15

btw: đó là Javascript; Java là một ngôn ngữ và Javascript khác. Không có thứ gì như tập lệnh Java. FYI

— Yanick Rochon

Bạn có thể xác minh rằng Kevin chỉnh sửa câu hỏi của bạn vẫn đang hỏi cùng một câu hỏi hoặc viết lại câu hỏi đó để đảm bảo chúng tôi hiểu không? (Bạn có đang cố gắng tìm một giải pháp thay thế cho tải không?)

— STW

388

Nếu bạn muốn phương thức onload lấy tham số, bạn có thể làm một cái gì đó tương tự như sau:

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

Điều này liên kết onload với một hàm ẩn danh, khi được gọi, sẽ chạy hàm mong muốn của bạn, với bất kỳ tham số nào bạn cung cấp cho nó. Và, tất nhiên, bạn có thể chạy nhiều hơn một chức năng từ bên trong chức năng ẩn danh.

— Matt Sieker
nguồn

Và bây giờ khi tôi năng động bao gồm một trang do máy chủ tạo và cần sẵn sàng DOM, tôi cần phải làm việc thông qua mỏ này. Nếu chỉ có ai đó đã khuyến khích người dùng thư viện đúng cách sớm hơn.

— Stefan Kendall

4

Tôi đã không nói rằng đó là một ý tưởng tốt. Mặc dù nhà phát triển chính nơi tôi làm việc có một trường hợp mạnh về hội chứng Not Invented Here, và tôi đã không thể thuyết phục anh ta sử dụng jquery, bên ngoài một vài trang.

— Matt Sieker

2

Thì có lẽ bạn nên chuyển việc. Nếu công cụ phù hợp cho công việc không phải là công cụ bạn đang sử dụng, tại sao bạn đập đầu vào tường liên tục chiến đấu với kẻ bất tài?

— Stefan Kendall

Và tôi có thể gọi cùng chức năng của bạn lần thứ hai bằng cách sử dụng nút onclick không?

— Faizan

73

Một cách khác để làm điều này là bằng cách sử dụng trình lắng nghe sự kiện, ở đây cách bạn sử dụng chúng:

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

Giải trình:

DOMContentLoaded Có nghĩa là khi các Đối tượng DOM của tài liệu được tải đầy đủ và nhìn thấy bởi JavaScript, thì điều này cũng có thể là "nhấp chuột", "tập trung" ...

function () Hàm ẩn danh, sẽ được gọi khi sự kiện xảy ra.

— Ahmed Jolani
nguồn

5

Lưu ý rằng điều này sẽ không hoạt động trong IE 8 trở xuống. Nếu không thì đây là giải pháp thuần túy tốt nhất!

— Philipp

46

Câu hỏi ban đầu của bạn không rõ ràng, giả sử chỉnh sửa / giải thích của Kevin là chính xác thì tùy chọn đầu tiên này không áp dụng

Các tùy chọn điển hình đang sử dụng onloadsự kiện:

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

Bạn cũng có thể đặt javascript của bạn ở phần cuối của cơ thể; nó sẽ không bắt đầu thực thi cho đến khi tài liệu hoàn tất.

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

Và, một tùy chọn khác, là xem xét sử dụng khung công tác JS mà thực chất là làm điều này:

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

— STW
nguồn

Các javascript:trong onloadlà không cần thiết, mặc dù không có hại.

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>đưa raUncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

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

window.onload = yourfunction;

Hoặc với jQuery nếu bạn muốn:

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

Nếu bạn muốn gọi nhiều hơn một chức năng khi tải trang, hãy xem bài viết này để biết thêm thông tin:

Sử dụng nhiều hàm tải JavaScript

— Sarfraz
nguồn

3

Điều này không chính xác, hàm sẽ thực thi và gán bất cứ thứ gì nó trả về cho tải. () Không nên ở đó.

— eprebello

1

Nếu có các chức năng khác đang lắng nghe sự kiện onload, điều này sẽ thổi bay chúng đi. Tốt hơn là thêm một người nghe sự kiện thay vì chỉ định một trình xử lý sự kiện trực tiếp. Ngay cả trong trường hợp này, bạn sẽ chỉ định nó là `window.onload = yourfeft 'mà không đóng hàm, không phải theo cách bạn có. Cách của bạn tìm cách thực hiện chức năng của bạn () tại thời điểm chuyển nhượng.

— Robusto

sẽ gán giá trị trả về của hàm cho window.onload, sẽ không hoạt động, trừ khi giá trị trả về là một hàm.

— I.devries

@eprebello: Bắt tốt, cố định, bạn thấy một thói quen khi viết tên hàm. Cảm ơn

— Sarfraz

1

window.onload = yourfloyment; Vấn đề với cách này là nó không chấp nhận tham số 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>

Mở rộng đoạn trích

— vô danh
nguồn

3

Tôi nghĩ rằng câu trả lời của anh ấy rất rõ ràng, vì bạn có thể thấy tập lệnh được đặt trong thẻ head, do đó cho phép nó được thực thi trước nội dung cơ thể .. hoặc giả sử tải trước các chức năng của nó hoặc bất cứ điều gì .. đôi khi một người đặt câu hỏi vì anh ấy không ' Tôi hoàn toàn không biết, nhưng sẽ không bao giờ có trường hợp ai đó cho bạn ăn, cũng không có ai trong cộng đồng này, bạn phải tự tìm kiếm thêm một chút. # đặc biệt

— là_that_you'm_a_web_developer

8

Bạn phải gọi hàm bạn muốn được gọi khi tải (tức là tải tài liệu / trang). Ví dụ: chức năng bạn muốn tải khi tải tài liệu hoặc trang được gọi là "yourFactor". Điều này có thể được thực hiện bằng cách gọi hàm trên sự kiện tải của tài liệu. Xin vui lòng xem mã dưới đây để biết thêm chi tiết.

Hãy thử mã dưới đây:

<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
nguồn

6

Đây là mẹo (hoạt động ở mọi nơi):

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

— Abhishek
nguồn

1

Để phát hiện html đã tải (từ máy chủ) được chèn vào DOM sử dụng MutationObserverhoặc phát hiện khoảnh khắc trong hàm loadContent của bạn khi dữ liệu đã sẵn sàng để sử dụng

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Kamil Kiełczewski
nguồn