如何在網頁上重新加載Javascript文件？

Question

當我在瀏覽器中調試Javascript函數並修改服務器上的代碼時，我想在瀏覽器中重新加載該函數，而不必刷新整個頁面。

我嘗試使用Firebug的“網絡”面板重新發送針對特定JS文件的GET請求。 JS文件的內容已重新加載，但是當我在“腳本”面板中進行調試時，它仍執行舊代碼。

這對於我的項目確實很重要，因為它只有一個頁面工作流程。 如果要在步驟2中測試邏輯，則必須刷新頁面並每次都再次執行步驟1。

順便說一句，我使用RequireJS加載依賴項。

Answer 1

還沒有對它進行過徹底的測試，但是我認為您可以通過創建一個新的腳本標簽（使用更改的查詢字符串來強制瀏覽器將其視為新腳本）來做到這一點。

function reload_script_id(id) {
    return reload_script(document.getElementById(id));
}

function reload_script(old_script) {
    var new_script = document.createElement('script');
    new_script.src = change_query_string(old_script.src);
    replace_preserving_id(old_script, new_script);
    return new_script;
}

function replace_preserving_id(old_el, new_el) {
    var id = old_el.id;
    old_el.parentNode.appendChild(new_el);
    old_el.remove();
    new_el.id = id;
}

function change_query_string(url) {
    return [url.split('?')[0], Math.random()].join('?');
}

例如，如果您有

<script id="abc" src="some-script.js"></script>

那你可以打電話

reload_script_id('abc');

它將被替換為

<script id="abc" src="some-script.js?0.7407381518278271"></script>

（這是一個演示此操作的jsfiddle。）