javascript - 加载 JavaScript 或 CSS 而不执行它们的方法有哪些？

Question

我通过添加 <style> 了解动态脚本/css 加载或 <link>标记到页面的头部或正文，但一旦下载，浏览器就会执行它。我正在考虑其他下载方式但不执行 javascript/css 代码。首先想到的是 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);

但在这种情况下，由于同源策略，我们只能使用来自同一域的脚本(尽管我们可以尝试使用 CORS 解决它)

我正在考虑的另一种方法是动态添加 iframe到页面，然后添加 script标记到 iframe , 因此脚本将在下载后执行，但它发生在另一个页面的上下文中 - iframe .

有没有其他方法可以下载不执行脚本？

更新:

下载但不执行 javascript/css 的原因之一是预加载第三方库，但仅在需要时使用它们。

Answer 1

刚刚发现另一种异步加载脚本/css 的选项(不与 SOP 冲突)- 是使用 <object>标签:

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

找到这个方法 here .所以我只是与您分享我的发现，希望它有用。