Các cách tải JavaScript hoặc CSS mà không cần thực thi chúng là gì?

Question

Tôi biết tải động/css động bằng cách thêm các thẻ <style> hoặc <link> vào đầu hoặc phần nội dung của trang, nhưng sau đó nó sẽ được thực thi bởi trình duyệt khi tải xuống. Tôi đã suy nghĩ về những cách khác để tải xuống nhưng không thực thi mã javascript/css. Đầu tiên điều gì sẽ đến trong tâm trí tôi là XMLHttpRequest:

//simple execution received script 
var executeScript = function(code){ 
    eval(code); 
}; 
//create XMLHttpRequest in cross-browser manner 
var xhr = createXMLHTTPObject(); 
//check whether file is loaded 
var checkStatus = function(){ 
    if(xhr.readyState == 4){ 
     if(xhr.status >= 200 && xhr.status < 300 || xhr == 304){ 
      executeScript(xhr.responseText); 
     } 
     else {//error 
     } 
    } 
}; 
//do request 
xhr.open('get','http://podlipensky.com/examples/dynamicscript/hey.js', true); 
xhr.onreadystatechange = checkStatus; 
xhr.send(null); 

Nhưng trong trường hợp này, chúng tôi đang giới hạn với kịch bản từ cùng một tên miền vì Policy xứ Same (mặc dù chúng ta có thể cố gắng workaround nó với CORS)

Một cách tiếp cận khác, tôi đã nghĩ đến là thêm động iframe vào trang và sau đó thêm script thẻ vào iframe, vì vậy tập lệnh sẽ được thực thi sau khi tải xuống, nhưng nó sẽ xảy ra trong ngữ cảnh của một trang khác - iframe.

Có cách nào khác để tải xuống và không thực thi tập lệnh không?

UPDATE:

Một trong những lý do tại sao nó sẽ hữu ích để tải về, nhưng không thực hiện javascript/css là pre-load thư viện của bên thứ ba, nhưng sử dụng chúng chỉ theo yêu cầu.

Answer 1

Bạn cũng có thể sử dụng iframe và sử dụng URL tập lệnh/css làm src của khung (vì vậy nó không được đánh giá/áp dụng), mặc dù bạn muốn chắc chắn trong trường hợp đó JavaScript/CSS được phân phối với Content-Type text/plain để tránh những điều không may xảy ra với các ký tự < và như vậy. Mặc dù bạn cũng nên gặp các vấn đề về SOP với cách tiếp cận này, trên trình duyệt phong nha, nếu iframesrc là từ một nguồn gốc khác.

Khác hơn thế, tôi nghĩ bạn phần lớn có nó được đề cập đến với các tùy chọn bạn liệt kê.

Answer 2

Nếu kịch bản của bạn đơn giản định nghĩa một hàm thì nó có thể được thực hiện mà không thực sự chạy bất cứ điều gì. Tất nhiên, điều này sẽ đòi hỏi sự hợp tác từ cả hai phía ala JSONP

//jsonp 
var result = {/*...*/}; 

//missingnonp 
var f = function(){ /**/ }; 

Answer 3

Giả sử bạn kiểm soát các máy chủ cung cấp trang, vào mà bạn muốn tải JS trong câu hỏi, cách dễ nhất là gửi URL thông qua AJAX đến máy chủ của bạn, tải nó từ đó (ví dụ thông qua PHP file_get_contents ($ url);) và lấy lại nó như là kết quả của cuộc gọi AJAX.

Answer 4

Chỉ cần phát hiện ra thêm một tùy chọn để tải script/css không đồng bộ (không có mâu thuẫn với SOP) - là sử dụng <object> tag:

<object data="http://podlipensky.com/examples/dynamicscript/hey.js" /> 

Tìm thấy phương pháp này here. Vì vậy, tôi chỉ chia sẻ với bạn những phát hiện của tôi, hy vọng nó sẽ hữu ích.