2010-04-28 25 views
6

Tôi có một vài trang động và tôi muốn thay đổi các yếu tố nhất định trước khi trang hiển thị hoàn toàn.nơi tốt nhất để đặt đoạn mã javascript để thay đổi DOM của trang trước khi nó hiển thị

đoạn của tôi là một cái gì đó giống như

document.body.getElementById("change").innerHTML = "<img src..."; 

Tôi không có quyền truy cập để thay đổi phía máy chủ nội dung.

Đâu là nơi tốt nhất để đặt đoạn mã để chạy mã trước khi trang được hiển thị?

Thay vào đó, hãy đặt javascript vào HEAD (bên trong sự kiện window.onload?) Hoặc trước khi kết thúc BODY (không phải bên trong trình xử lý sự kiện) tối ưu?

Trả lời

0

AFAIK bạn không thể thực hiện việc này. Bởi vì trước khi một trang được hiển thị, sẽ không có bất kỳ phần tử nào và bạn không thể truy cập các phần tử chưa được tải vào cây DOM.

2

Tôi e rằng bạn rất khó có thể thực thi tập lệnh của mình trước khi trang hiển thị. Chắc chắn bạn có thể đặt một kịch bản nội tuyến và có nó sử dụng document.write (...) tại nơi bạn muốn nó hiển thị nội dung của bạn, nhưng đây là một giải pháp khủng khiếp. Hoặc tốt nhất bạn có thể làm là tại sự kiện 'DOM Ready', mặc dù rất khó để thực hiện trên tất cả các trình duyệt một cách nhất quán, bạn thực sự cần một thư viện để trừu tượng hóa các chi tiết. jQuery cung cấp phương thức sẵn sàng để kích hoạt một sự kiện khi DOM sẵn sàng, thay vì khi trang và tất cả các tài nguyên được tải xong.

1

Kể từ khi trình duyệt thường làm cho các yếu tố ngay sau khi họ đã được phân tích một cách tốt nhất là nên làm ra các mã trong một phần tử script trực tiếp sau khi các yếu tố tham chiếu:

<div id="change"></div> 
<script type="text/javascript"> 
    document.body.getElementById("change").innerHTML = "<img src..."; 
</script> 
1

Không chắc tôi hiểu vấn đề của bạn một cách chính xác, nhưng nếu bạn sử dụng trình nghe sự kiện bên trong đầu (chẳng hạn như jQuery $(document).ready()), bạn sẽ có thể thay đổi phần tử khi cấu trúc dom đã được tải bằng cách chuyển đoạn mã của bạn tới hàm (handler) đang được gọi khi sự kiện kích hoạt.

<HEAD> 
    //... 
    <SCRIPT type="text/javascript"> 

     $(document).ready(function() { 
      $("#change").append(
       $("<img src=\"...\">") 
      ) ; 
     }) ; 

    <SCRIPT> 

</HEAD> 

Sử dụng lõi javascript bạn sẽ phải ngã ba người nghe sự kiện của bạn cho mozilla (W3C) và thông số kỹ thuật sự kiện internet explorer. Có rất nhiều tài liệu về cách thực hiện điều đó trên internet.

Dù bằng cách nào thì cách tốt nhất để làm trong trường hợp này rõ ràng là tự mình tạo nội dung chứ không phải thay đổi hiển thị bài đăng.

0

Nếu bạn không muốn hiển thị bất kỳ thành phần nào trước khi thực hiện thay đổi DOM, bạn có thể đặt CSS display: none trên phần tử nội dung và sau đó thay đổi thành display: block khi bạn đã hoàn tất.

Các vấn đề liên quan