有条件加载javascript脚本

Conditionally loading javascript script

本文关键字：脚本 javascript 加载 有条件      更新时间：2023-09-26

我有一个chrome扩展，有一个设置页面。在设置页面，我想有预览和保存按钮。我希望能够传递临时选项对象到我的应用程序。我怎样才能做到这一点，使我不必重写应用程序两次?如何传递信息到html页面，这次它应该访问LocalStorage['permanent_settings']和其他LocalStorage['temporary_settings']，并使用该对象作为设置对象呈现内容。我也希望我的代码在本地执行，所以我不想要任何PHP等

你可以将你的条件添加到这个方法中，它允许你动态地添加一个外部javascript文件:

loadExternalScriptFile = function(filename) {
    var fileref = document.createElement("script");
    if (fileref){
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);        
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref);
    }
}
//dynamically load and add this .js file
loadExternalScriptFile("myscript.js");

您也应该尝试将读源保存在本地存储中，方法类似于:

// At startup, defaulting to permanent_settings
function onLoad() {
  LocalStorage['read_from'] = 'permanent_settings';
  // Other initialization work
  // ...
}
// When pressing Save
function onSaveClick() {
  LocalStorage['read_from'] = 'permanent_settings';
}
// When pressing Preview
function onPreviewClick() {
   LocalStorage['read_from'] = 'temporary_settings';
}
// When accessing the settings, read their source
function getSettingForKey(var key) {
   var source = LocalStorage['read_from'];
   // It can be either permanent_settings, or temporary_settings
   var settingsArray = LocalStorage[source];
   return settingsArray[key];
}

您可以使用jQuery加载脚本，甚至在加载时执行代码。您甚至不必将代码包装在$(function(){ ... })块中:

$.getScript(chrome.extension.getURL("myscript.js"), function() {
    alert("myscript.js has finished loading");
});
相关文章：