Question

我想在点击按钮时加载JavaScript和CSS文件。我已经尝试了很多方法，有些方法正在运行，但它们只允许使用预定义的函数立即执行，而且我至少不想预定义函数。我想做的就是从我的服务器加载一个新的JavaScript和CSS文件，并在我想要的时候执行它（至少是JavaScript）。

Answer 1

你可以动态添加javascript，但唯一对我有用的方法是：

var path_to_script = "the url";
var response = syncRequest("GET", path_to_script, null);

var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.text = response;
head.appendChild(script);


function syncRequest(_method, _url, _data) {
    var req = getXmlHttp();
    try{
        req.open(_method, _url, false);
        req.send(_data);
     }catch(e){
            alert(e.description);
     }
     return req.responseText;
}

function getXmlHttp() {
    var xml_http = null;
    if (window.XDomainRequest) { xml_http = new XDomainRequest(); }
    else { xml_http = new XMLHttpRequest; }
    return xml_http;
}

我不确定ajax请求是否有效，它是我项目中的部分复制粘贴，有很多更改，但我认为很容易理解它应该如何工作。

CSS加载：

var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", path_to_css);
document.getElementsByTagName("head")[0].appendChild(css);

Answer 2

    <link id="custom_stylesheet" rel="stylesheet" type="text/css" href="" />
    <script id="custom_script"></script>

    <script>
    function LoadStyleAndScript() 
    {
        $("#custom_stylesheet").attr("href", "//example.com/mystyle.css");
        $("#custom_script").attr("src", "//example.com/myscript.js");
    }
    </script>

    <input type="button" onClick="LoadStyleAndScript();" value="Load it">

Answer 3

也许您可以在隐藏的div中包含iframe，并根据用户点击的内容加载javascript文件。问题是传递javascript变量。在iframe中呈现页面之前，您需要在PHP中预定义它们。

如果您只是加载一个javascript文件并添加到当前文档正文中，我认为它不会在使用全局变量方面起作用（除非您再次使用PHP预定义它们）。

根据需要加载javascript和css文件

3 个答案: