Làm thế nào để chạy một chức năng khi trang được tải?

246

Tôi muốn chạy một chức năng khi trang được tải, nhưng tôi không muốn sử dụng nó trong <body>thẻ.

Tôi có một tập lệnh chạy nếu tôi khởi tạo nó trong <body>, như thế này:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

Nhưng tôi muốn chạy nó mà không cần <body onload="codeAddress()">và tôi đã thử rất nhiều thứ, ví dụ như thế này:

window.onload = codeAddress;

Nhưng nó không hoạt động.

Vậy làm thế nào để tôi chạy nó khi trang được tải?

javascript html onload

— Claes Gustavsson
nguồn

Bạn đang chạy window.onload = codeAddresssau codeAddress()được xác định? Nếu vậy, điều này sẽ làm việc. Bạn có chắc chắn không có lỗi ở nơi khác không?

— Skilldrick

Điều này không có ý nghĩa gì. window.onload chạy sau khi tải trang và tất cả javascript đều khả dụng, do đó, hàm codeAddress () có thể được khai báo ở bất cứ đâu trong trang hoặc các tệp js được liên kết. Nó không phải đến trước trừ khi nó được gọi trong quá trình tải trang.

— Jared Farrish

@Jared Có. Hãy xem jsfiddle.net/HZHmc . Nó không hoạt động. Nhưng nếu bạn di chuyển window.onload sang sau định nghĩa: jsfiddle.net/HZHmc/1 thì nó hoạt động.

— Skilldrick

Một khai báo hàm thường được kéo lên trên cùng của phạm vi, vì vậy hàm có thể được khai báo ở bất cứ đâu trong phạm vi có thể truy cập.

— Nga Cam

4

tất cả các trình duyệt phổ biến có thể hiển thị lỗi javascript - bạn có nhận được lỗi nào không?

— Christoph

354

window.onload = codeAddress;nên hoạt động - đây là bản demo và mã đầy đủ:

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

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

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

— Darin Dimitrov
nguồn

3

Như tôi đã nói trong câu trả lời của mình, không có gì sai với mã như đã thấy - lý do nó không hoạt động phải là một lỗi trong JS ở đâu đó.

— Skilldrick

nếu bạn đặt một đoạn văn bản trong phần thân, nó sẽ không tải cho đến khi bạn nhấn ok.

— Huỳnh

Trình xử lý sự kiện toàn cầu này chỉ khả dụng trong Chrome. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ khăn

— Bị mất

177

Thay vì sử dụng jQuery hoặc window.onload, JavaScript gốc đã áp dụng một số chức năng tuyệt vời kể từ khi phát hành jQuery. Tất cả các trình duyệt hiện đại đều có chức năng sẵn sàng DOM của riêng chúng mà không cần sử dụng thư viện jQuery.

Tôi khuyên bạn nên điều này nếu bạn sử dụng Javascript gốc.

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

— Spencer tháng năm
nguồn

4

(câu hỏi noob: những gì hiện các falseviệc phải làm?)

— ᔕᖺᘎᕊ

7

@ Cho thuộc tính 'bong bóng' (mà bạn không phải bao gồm, tôi chỉ cần điền vào tất cả các booleans cho thói quen tốt). Ngoài ra còn có một tuyên bố boolean khác cho thuộc tính 'có thể hủy', nhưng nó không hữu ích lắm vì tuyên bố trên đã không thể hủy bỏ. Đọc thêm về nó ở đây: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer ngày

1

Đây là những gì tôi đang tìm kiếm ngay bây giờ :) Thực thi khi DOM hoàn tất, do đó bạn có thể thao tác với nó, chứ không phải khi trình duyệt nói "trang được tải hoàn toàn", có thể mất vài giây, dựa trên nội dung bên ngoài (như quảng cáo)

— Nathanyel

Câu hỏi hơi khó, nếu bạn không biết liệu trang có được tải hay không? Chỉnh sửa: Ah: document

— YetState

1

@ x-yuri "Sự kiện DOMContentLoaded được kích hoạt khi tài liệu đã được tải và phân tích cú pháp hoàn toàn, không cần chờ biểu định kiểu, hình ảnh và khung con để tải xong (sự kiện tải có thể được sử dụng để phát hiện trang được tải đầy đủ)." - stackoverflow.com/questions/2414750/ Mạnh

— Spencer ngày

46

Lấy câu trả lời của Darin nhưng theo kiểu jQuery. (Tôi biết người dùng đã yêu cầu javascript).

chạy fiddle

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

— Ăn tại Joes
nguồn

4

Câu trả lời của bạn đã dạy tôi phân bổ, nhưng không phải về jQuery / javascript.

— kỳ lân2

2

@VijayKumar đây là jQuery, không phải Javascript gốc nên bạn cần có thư viện jQuery để nó hoạt động

— Spencer ngày

30

Giải pháp thay thế. Tôi thích điều này vì sự đơn giản và mã đơn giản.

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

Đây là một chức năng ẩn danh, trong đó tên không được chỉ định. Điều xảy ra ở đây là, hàm được định nghĩa và thực thi cùng nhau. Thêm phần này vào phần đầu hoặc phần cuối của phần thân, tùy thuộc vào việc nó sẽ được thực thi trước khi tải trang hay ngay sau khi tất cả các phần tử HTML được tải.

— Habeeb
nguồn

1

Đây là mã duy nhất hoạt động với HTML Preview cho GitHub: htmlpreview.github.io Mã khác, trong khi chính xác, bị phá hỏng bởi Bản xem trước HTML này.

— Jason Doucette

1

Ai đó có thể giải thích điều này khác với việc đặt các thẻ script ở cuối trang HTML và mục đích của chức năng ẩn danh không?

— Pat-Cười

10

window.onload = function() { ... vv không phải là một câu trả lời tuyệt vời.

Điều này có thể sẽ hoạt động, nhưng nó cũng sẽ phá vỡ bất kỳ chức năng nào khác đã nối vào sự kiện đó. Hoặc, nếu một chức năng khác móc vào sự kiện đó sau sự kiện của bạn, nó sẽ phá vỡ sự kiện của bạn. Vì vậy, bạn có thể dành nhiều giờ sau đó để cố gắng tìm hiểu tại sao thứ gì đó đang hoạt động không còn nữa.

Một câu trả lời mạnh mẽ hơn ở đây:

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;
    }
}

Một số mã tôi đã và đang sử dụng, tôi quên nơi tôi tìm thấy nó để cung cấp tín dụng cho tác giả.

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);}

Hi vọng điêu nay co ich :)

— Sẽ
nguồn

cảm ơn vì đã cung cấp cái nhìn sâu sắc hơn về onloadcách sử dụng

— CybeX

4

Hãy thử readystatechange

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

nơi các tiểu bang là:

đang tải - tài liệu đang tải (không bị bắn trong đoạn trích)
tương tác - tài liệu được phân tích cú pháp, bắn trướcDOMContentLoaded
hoàn thành - tài liệu và tài nguyên được tải, bắn trướcwindow.onload

Hiển thị đoạn mã

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

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

— Kamil Kiełczewski
nguồn

3

Hãy xem tập lệnh domReady cho phép thiết lập nhiều chức năng để thực thi khi DOM đã được tải. Về cơ bản, đó là những gì mà Dom sẵn sàng làm trong nhiều thư viện JavaScript phổ biến, nhưng rất nhẹ và có thể được lấy và thêm vào lúc bắt đầu tệp tập lệnh bên ngoài của bạn.

Ví dụ sử dụng

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

function codeAddress() {

}

domReady(codeAddress);

— Nga Cam
nguồn

0

window.onload sẽ hoạt động như thế này:

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>

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

— Rudra
nguồn