2012-11-30 19 views
11

Tôi chỉ nhìn vào mã nguồn trang web của một random app page trên apptivate.ms và nhận thấy JavaScript này trong <head>:Lý do để thêm thẻ <style> tĩnh đơn giản thông qua document.write() là gì?

<script type="text/javascript"> 
     document.write("<style type=\"text/css\">.app-description { max-height: 600px }</style>"); 
</script> 

Nó rõ ràng là hoàn toàn tĩnh về phía khách hàng vì vậy tôi tự hỏi những gì các use-case có . Kể từ khi họ phát triển Stack Exchange (những người đứng sau apptivate.ms) là khá thông minh Tôi là chắc chắn có một số lý do cho nó, nhưng tôi không thể tìm ra cái nào. Tôi đoán nó liên quan đến việc trì hoãn quy tắc trở nên hoạt động cho đến khi toàn bộ tài liệu được tải nhưng tôi hy vọng quy tắc sẽ được áp dụng ngay khi trình duyệt "thấy" thẻ mới ...

Trả lời

9

Đó là vì một phần của nội dung của phần tử .app-description bị ẩn và có thể được hiển thị bằng cách nhấp vào nút "Hiển thị thêm".

Nếu JavaScript bị tắt, nút sẽ không hoạt động, vì vậy nếu kiểu được đề cập trực tiếp trong biểu định kiểu, bạn không bao giờ có thể thấy phần còn lại của nội dung. Bằng cách thêm kiểu đó vào <head>, với JavaScript, nó đảm bảo rằng người dùng đã bật JS sẽ không nhìn thấy tất cả nội dung cùng một lúc, nhưng thay vào đó sẽ nhận được trải nghiệm "nâng cao" và những người đó mà không bật JS sẽ vẫn có thể sử dụng trang web.

Đây là ảnh chụp màn hình khi bật JS. Các "hiển thị nhiều hơn" nút sử dụng JavaScript để mở rộng các yếu tố chiều cao đầy đủ:

enter image description here

Đây là một cách tiếp cận tốt đẹp để tăng cường tiến bộ - bằng cách sử dụng document.write để chèn các yếu tố mới style bên trong head bạn tránh được bất kỳ tốt flash của nội dung chưa được lưu trữ (trong trường hợp này, các nhà phát triển có thể đợi cho đến khi DOM sẵn sàng và sau đó sử dụng JavaScript để thêm thuộc tính maxHeight động, nhưng điều đó sẽ khiến người dùng nhìn thấy chiều cao đầy đủ trước khi JavaScript được thực thi trên DOM sẵn sàng).

+0

a.k.a. tăng cường tiến bộ. Chỉ cần nhận ra có một tấn công cụ tôi cần phải sửa trong ứng dụng của tôi .. Tks .. – techfoobar

+3

@ techfoobar Tôi sẽ không sử dụng phương pháp này nếu đó là những gì bạn đang lập kế hoạch bởi "tấn công cụ cần điều chỉnh". Tốt hơn và dễ dàng hơn là áp dụng một 'class =" js "' vào thẻ body của bạn cho người dùng kích hoạt javascript, và sau đó nhắm mục tiêu css của bạn cho phù hợp. – Pebbl

+0

Tất nhiên. Tôi sẽ không thêm các thẻ script ở khắp mọi nơi. Nhưng tôi nhớ lại rất nhiều người dùng mà tôi đã bỏ qua cho đến bây giờ vì sự thiếu hiểu biết này. – techfoobar

2

Điều này được gọi là tăng cường "tiến bộ". Về cơ bản, khái niệm rất đơn giản; không cho rằng mọi người sẽ có JavaScript được kích hoạt, ngay cả khi 98% trong số họ sẽ ... nhưng nếu họ làm, hãy làm một số điều tốt đẹp với nó.

Ý tưởng là để có DOM của bạn (HTML) tại chỗ và làm việc mà không có sự rõ ràng CẦN có JS kích hoạt để sử dụng nó.

Sau đó, nếu tải JS (mà nó sẽ phải trong trường hợp này để thêm kiểu đó), bạn có thể nhắm mục tiêu một phần tử có tên lớp cụ thể. Trong trường hợp này, nó là .app-description. Nếu bạn không có JS, mục được đề cập vẫn không bị ảnh hưởng.

Hy vọng rằng sẽ làm cho một số ý nghĩa :)

EDIT: Bây giờ, bạn vẫn có thể tải một tập tin JS rằng hiện một số điều CSS, nhưng lý do nó được đặt trong thẻ script cứ vào trang, là bởi vì bạn có thể tránh yêu cầu HTTP tất cả cùng nhau nếu không cần thiết.

+0

Ah heh, điểm tốt. Tôi rõ ràng biết về PE nhưng không thực sự xem xét nó trong trường hợp này. Tuy nhiên, tôi muốn sử dụng '

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