Ảnh trong thẻ noscript chỉ được tải xuống nếu Javascript bị vô hiệu hóa?

Question

Hãy xem xét ví dụ sau:

<noscript> 
    <img class="photo" src="example.png"> 
</noscript> 

Liệu khách hàng chỉ tải về các tập tin hình ảnh nếu họ đã Javascript bị vô hiệu hóa? (Tôi biết khách hàng chỉ có thể xem hình ảnh nếu Javascript bị vô hiệu hóa trong ví dụ này)

Lý do tôi hỏi là vì tôi đã sử dụng URI dữ liệu base64 cho một số thuộc tính hình nền trong CSS bên ngoài (tránh yêu cầu http). Tôi cũng muốn sử dụng các URI dữ liệu base64 cho giá trị src của một số thẻ img bằng cách cập nhật các giá trị của chúng thông qua Javascript bên ngoài (để giữ lại các lợi ích của bộ nhớ đệm).

Về cơ bản, toàn bộ vấn đề này là để tránh/giới hạn các yêu cầu http và vì vậy tôi đã tự hỏi liệu tôi có thể làm suy giảm một cách duyên dáng và chỉ tìm nạp các tệp hình ảnh nếu Javascript bị tắt không? Hoặc là hình ảnh được tải xuống bất kể?

Answer 1

Đặc điểm kỹ thuật HTML 4.01 chỉ cho biết nội dung của noscript không được hiển thị trong một số trường hợp nhất định. Tuy nhiên, điều này cho thấy các trình duyệt không nên thực hiện bất kỳ hoạt động GET nào trên cơ sở nội dung của nó trong các tình huống như vậy, vì các thao tác như vậy sẽ vô nghĩa và sẽ làm giảm hiệu quả.

Dự thảo HTML5 rõ ràng hơn và có thể phản ánh hành vi trình duyệt thực tế. Nó nói về noscript element, trong một lưu ý nhấn mạnh: “nó hoạt động là cơ bản là 'tắt' trình phân tích cú pháp khi các tập lệnh được bật, sao cho nội dung của phần tử được coi là văn bản thuần túy chứ không phải là phần tử thực”. (Lưu ý liên quan đến lý do tại sao noscript không hoạt động khi sử dụng cú pháp XHTML, nhưng nó cũng tiết lộ nguyên tắc hoạt động của nó, khi nó hoạt động.)

Vì vậy, chúng tôi có thể mong đợi rằng khi bật kịch bản, nội dung của noscript thậm chí sẽ không được phân tích cú pháp (ngoại trừ việc nhận ra thẻ kết thúc). câu trả lời Blender dường như xác nhận điều này, và do đó làm thí nghiệm nhỏ của tôi với Firefox:

<img src=foo style="foo: 1"> 
<noscript> 
<img src=bar style="bla: 1"> 
</noscript> 

Firefox làm cho một yêu cầu GET không cho foo nhưng không có yêu cầu cho bar, khi kịch bản được kích hoạt. Ngoài ra, nó cho thấy một cảnh báo về mã CSS sai foo: 1, trong bảng điều khiển lỗi, nhưng không có cảnh báo về bla: 1. Vì vậy, dường như thẻ img thậm chí không được phân tích cú pháp.

Tuy nhiên, tôi không thấy câu hỏi liên quan đến kịch bản được trình bày như thế nào để hỏi câu hỏi đó. Tôi cho rằng bạn sử dụng phần tử img bên ngoài noscript và đặt ở đó, sử dụng URL data:, nội dung ban đầu mong muốn (sẽ vẫn tồn tại, dưới dạng dự phòng, nội dung cuối cùng khi tắt tập lệnh).

Answer 2

ngắn Trả lời:
NO, hình ảnh không được tải về trong một yếu tố <noscript>

trả lời kỹ thuật:

Tôi vừa mới được làm một số thử nghiệm trên my personal website cho các chức năng với JavaScript tàn tật và đã xem qua bài viết này ... với JavaScript vẫn bị tắt, btw.

Vâng, ở phía trên cùng của trang web này, Stack Overflow có một thông điệp cảnh báo trong đó nêu:

“Stack Overflow hoạt động tốt nhất với JavaScript được bật”

Là loại đam mê web người có xu hướng (!) “nguồn xem” tại thực tế mỗi trang web duy nhất tôi nhìn vào, mã HTML cho thông điệp như sau:

<noscript> 
    <div id="noscript-warning">Stack Overflow works best with JavaScript enabled<img src="http://example.com/path/to/1x1-pixel.gif" alt="" class="dno"></div> 
</noscript> 

không có gì quá đột phá đó. Tuy nhiên, điều tôi quan tâm là phần tử IMG, được tham chiếu hình ảnh vô hình 1px x 1px.

Tôi là giả sử rằng hình ảnh này phải được phần mềm phân tích/thống kê sử dụng để phát hiện có bao nhiêu người dùng đang duyệt mà không có JavaScript. Nếu giả định này là chính xác (và không có lý do nào khác để sử dụng hình ảnh pixel 1x1 trống ở đây mà tôi đã bỏ qua ở đây), do đó về cơ bản điều này sẽ xác nhận như sau: trình duyệt không tải xuống nội dung của bất kỳ thứ gì trong một yếu tố NOSCRIPT, ngoại trừ trong trường hợp JavaScript thực sự bị tắt. (Và chắc chắn dường như không có bất kỳ kỹ thuật bố cục kiểu '98 kiểu retro nào đang diễn ra, tôi rất vui được nói!) ;-)

(PS - Tôi hy vọng rằng tôi không xúc phạm bất cứ ai tại Stack Mạng trao đổi để chỉ ra điều này!)