Tại sao phải chia thẻ <script> khi viết nó bằng document.write ()?

Tại sao một số trang web (hoặc nhà quảng cáo cung cấp cho khách hàng mã javascript) sử dụng kỹ thuật phân tách <script>và / hoặc </script>gắn thẻ trong document.write()các cuộc gọi?

Tôi nhận thấy rằng Amazon cũng làm điều này, ví dụ:

<script type='text/javascript'>
  if (typeof window['jQuery'] == 'undefined') document.write('<scr'+'ipt type="text/javascript" src="http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js"></sc'+'ript>');
</script>

</script>phải chia tay vì nếu không nó sẽ kết thúc <script></script>khối bao vây quá sớm. Thực sự nó nên được phân chia giữa <và /, bởi vì một khối tập lệnh được cho là (theo SGML) bị chấm dứt bởi bất kỳ chuỗi mở thẻ cuối (ETAGO) nào (ví dụ </) :

Mặc dù các phần tử STYLE và SCRIPT sử dụng CDATA cho mô hình dữ liệu của chúng, nhưng đối với các phần tử này, CDATA phải được xử lý khác nhau bởi các tác nhân người dùng. Đánh dấu và các thực thể phải được coi là văn bản thô và được chuyển đến ứng dụng. Sự xuất hiện đầu tiên của chuỗi ký tự " </" (dấu phân cách mở thẻ cuối) được coi là chấm dứt kết thúc nội dung của phần tử. Trong các tài liệu hợp lệ, đây sẽ là thẻ kết thúc cho phần tử.

Tuy nhiên, trong thực tế, các trình duyệt chỉ kết thúc phân tích cú pháp khối CDATA trên </script>thẻ đóng thực tế .

Trong XHTML, không có xử lý đặc biệt nào cho các khối tập lệnh, do đó, bất kỳ ký tự <(hoặc &) nào bên trong chúng phải &escaped;giống như trong bất kỳ phần tử nào khác. Tuy nhiên, sau đó các trình duyệt đang phân tích XHTML dưới dạng HTML trường học cũ sẽ bị nhầm lẫn. Có các cách giải quyết liên quan đến các khối CDATA, nhưng đơn giản nhất là tránh sử dụng các ký tự này không thoát. Cách tốt hơn để viết một phần tử tập lệnh từ tập lệnh hoạt động trên một trong hai loại trình phân tích cú pháp sẽ là:

<script type="text/javascript">
    document.write('\x3Cscript type="text/javascript" src="foo.js">\x3C/script>');
</script>

Đây là một biến thể khác mà tôi đã sử dụng khi muốn tạo một thẻ script nội tuyến (để nó thực thi ngay lập tức) mà không cần bất kỳ hình thức thoát nào:

<script>
    var script = document.createElement('script');
    script.src = '/path/to/script.js';
    document.write(script.outerHTML);
</script>

(Lưu ý: trái với hầu hết các ví dụ trên mạng, tôi không thiết lập type="text/javascript"trên cả thẻ kèm theo, cũng không phải là tạo ra một: không có trình duyệt không có mà như là mặc định, và vì vậy nó là không cần thiết, nhưng sẽ không làm tổn thương một trong hai, nếu bạn không đồng ý).

Tôi nghĩ là để ngăn trình phân tích cú pháp HTML của trình duyệt giải thích <script> và chủ yếu là </ script> làm thẻ đóng của tập lệnh thực tế, tuy nhiên tôi không nghĩ rằng sử dụng document.write là một ý tưởng tuyệt vời để đánh giá tập lệnh các khối, tại sao không sử dụng DOM ...

var newScript = document.createElement("script");
...

Giải pháp Bobince đăng hoạt động hoàn hảo cho tôi. Tôi muốn cung cấp một phương pháp thay thế cho khách truy cập trong tương lai:

if (typeof(jQuery) == 'undefined') {
    (function() {
        var sct = document.createElement('script');
        sct.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js';
        sct.type = 'text/javascript';
        sct.async = 'true';
        var domel = document.getElementsByTagName('script')[0];
        domel.parentNode.insertBefore(sct, domel);
    })();
}

Trong ví dụ này, tôi đã bao gồm một tải có điều kiện cho jQuery để chứng minh trường hợp sử dụng. Hy vọng điều đó hữu ích cho ai đó!

Phần </script>bên trong chuỗi Javascript được trình phân tích cú pháp HTML hiểu là thẻ đóng, gây ra hành vi không mong muốn ( xem ví dụ trên JSFiddle ).

Để tránh điều này, bạn có thể đặt javascript của mình giữa các bình luận (kiểu mã hóa này là thông lệ, trở lại khi Javascript được hỗ trợ kém giữa các trình duyệt). Điều này sẽ hoạt động ( xem ví dụ trong JSFiddle ):

<script type="text/javascript">
    <!--
    if (jQuery === undefined) {
        document.write('<script type="text/javascript" src="http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js"></script>');
    }
    // -->
</script>

... nhưng thành thật mà nói, sử dụng document.writekhông phải là điều tôi sẽ xem xét thực hành tốt nhất. Tại sao không thao tác trực tiếp DOM?

<script type="text/javascript">
    <!--
    if (jQuery === undefined) {
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', 'http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js');
        document.body.appendChild(script);
    }
    // -->
</script>