通过html标签数据属性动态加载js，css文件

我们能否实现动态加载js，css等文件的过程？通过html标签数据属性动态加载js，css文件

通过从html标签数据属性获取所有需要的信息（我们必须加载的）？

例如：

<html> 
    <head> 
     <title>Our app</title> 
    </head> 
    <body data-load-css="style"> 
     <div class="all" data-load-js="jquery|jqueryui" data-load-js-type="async"> 
      <div class="header" data-load-js="main"> 
       Header 
      </div> 
      <div class="body" data-load-js="body"> 
       Body 
       <div class="some-tipsy" data-load-css="tipsy"></div> 
      </div> 
      <div class="footer" data-load-js="other"> 
       Footer 
       <div class="some-other" data-load-css="other"></div> 
      </div> 
     </div> 
     <script> 
      // our js app to load dynamically js, css 
     </script> 
    </body> 
</html>

所以，也许你有一些想法如何以最好的方式做到这一点？具有最佳的性能和灵活性。

或者我只需要使用require js，不要担心一些“新事物”？如果只需要js，那么这个js插件怎么做最好？要最动态地加载所有东西？

如何解决js异步问题，推迟loding？某些脚本必须按特定顺序加载。

这是我持续2当前问题的版本：https://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies

来源

2015-12-21 Vital

但是，如果您导航离开，然后再次返回页面，您是否认为这会超载？它将再次加载相同的库和文件。 – Jai

Jai提出了一个很好的解决方案，但需要更多的上下文描述... – MTroy

在这一点上我没有很大的知识。所以，我不想通过创建主要的js网站逻辑来犯一些严重的错误。每个想法，这里粘贴的一些解决方案，对我来说都很有趣。 – Vital

以下是几种方法来动态加载脚本：

的Javascript：编写一个定制的负载功能。
jQuery：$.getScript()。对于css，请参阅SO-Post。
require.js：要求（MODULENAME）
ECMA 6：import

以下是一个纯粹的javascript函数动态加载脚本：

function(url, callback) { 
    var scripts = utils.getLoadedScripts(); // Read all scripts and push names in array. 
    var lastIndex = url.lastIndexOf("/"); 
    var isLoaded = false; 
    scripts.forEach(function(row, index) { 
    if (row == url.substring(lastIndex + 1)) { 
     isLoaded = true; 
     return; 
    } 
    }); 
    if (!isLoaded) { 
    //$(".reveal").addClass("loading"); 
    // Adding the script tag to the head as suggested before 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 
    script.name = "url"; 

    // Then bind the event to the callback function. 
    // There are several events for cross browser compatibility. 
    script.onreadystatechange = callback; 
    script.onload = callback; 

    // Fire the loading 
    head.appendChild(script); 
    } 
};

来源

2015-12-21 07:54:16 Rajesh

谢谢，但会更大，如果你有一些确切的代码来解决我的主要问题。非常抽象，简单） – Vital

您可以查看以下[JSFiddle]（https://jsfiddle.net/RajeshDixit/pk7v1pmb/）以供参考。希望它可以帮助 – Rajesh

你可以利用web workers你案件。您可以异步处理代码以异步执行任务。

主要脚本：

var worker = new Worker('doWork.js'); 

worker.addEventListener('message', function(e) { 
    console.log('Worker said: ', e.data); 
}, false); 

worker.postMessage(); // Starts the worker to work;

doWork.js中（工人）：

self.addEventListener('message', function(e) { 
    self.postMessage("Hi, loaded async."); // send the data via postMessage to main script. 
}, false);

那么，这意味着什么，你可以把你的逻辑中doWork.js，把脚本异步用户的屏幕。

来源

2015-12-21 08:09:54 Jai

谢谢。你可以显示代码示例，当我们将加载：2个异步js，2个css文件和3个带有延迟选项的js文件？然后在主要的js应用逻辑中，我有可能从所有加载的脚本访问变量？ Js文件必须通过当前页面上公开的html数据属性加载。 – Vital

@vital你应该告诉我们你试过了什么，但是失败了吗？只有这样我们才能帮助你，我只是发布了一条路径来做到这一点。 – Jai

下面是更多解释：http://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies – Vital

通过html标签数据属性动态加载js，css文件

回答

相关问题