如何在「onclick」事件中加載外部Javascript文件？

我有2個div在我的HTML。如何在「onclick」事件中加載外部Javascript文件？

<div id="div1"></div> 
<div id="div2"></div>

在點擊「DIV2」我要加載外部JavaScript文件說，例如「https://abcapis.com/sample.js」。

我想包括像下面onclick事件的JS文件，

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "https://abcapis.com/sample.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

這包括在頭部分的腳本標籤，但沒有加載，因爲腳本標籤會在頁面加載只能裝載（指正這裏如果我錯了）。

有沒有其他方法可以繼續。

在此先感謝。

來源

2013-10-03 Abu

你確定你的代碼正在運行嗎？它看起來應該適用於我，並且它在Chrome中對我來說工作得非常好。 – Xymostech

使用jQuery的$ .getScript（）函數應該爲您完成這項工作。

http://api.jquery.com/jQuery.getScript/

下面是示例代碼片段：

$("button").click(function(){ 
    $.getScript("demo_ajax_script.js"); 
});

如果你不使用jQuery，你將不得不學習如何使用AJAX來新的腳本動態地加載到您的頁。

來源

2013-10-03 02:54:22 tremor

你的代碼幾乎可以工作。您需要使用.setAttribute。這是我的工作代碼。我用jQuery作爲我的腳本：

var script = document.createElement('script'); 
script.setAttribute('type', 'text/javascript'); 
script.setAttribute('src', 'jquery.min.js'); 
document.head.appendChild(script);

而且這樣做。

編輯：

一些更多的信息。當您執行類似script.type = 'text/javascript'的操作時，您正在對該對象設置屬性，但這不一定與將該屬性與實際節點屬性關聯在一起。

來源

2013-10-03 02:55:51 rescuecreative

這對我來說非常合適！ –

你使用jQuery嗎？如果是這樣，你可以嘗試$.getScript()。

您可能還想檢查此answer。但基本上，你可以做這樣的事情：

<a href='linkhref.html' id='mylink'>click me</a> 
<script type="text/javascript"> 
    var myLink = document.getElementById('mylink'); 

    myLink.onclick = function(){ 

     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "Public/Scripts/filename.js."; 
     document.getElementsByTagName("head")[0].appendChild(script); 
     return false; 
    } 
</script>

來源

2013-10-03 03:01:30

$("button").click(function(){ 
    $.getScript("demo_ajax_script.js"); 
});

我錯過一個信息是，該路徑必須是絕對的。

來源

2017-08-30 10:48:27

如何在「onclick」事件中加載外部Javascript文件？

回答

相關問題