通过html标签数据属性动态加载js、css文件
Posted
技术标签:
【中文标题】通过html标签数据属性动态加载js、css文件【英文标题】：Dynamically loading js, css files by html tag data attributes 【发布时间】：2016-03-27 05:53:38 【问题描述】：能否实现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 async, defer loding 的问题？某些脚本必须按特定顺序加载。
这是我当前问题的续版 2：https://***.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies
【问题讨论】：
但是，如果您离开然后再次返回该页面，您不认为这将是一个超载。它将再次加载相同的库和文件。 Jai 提出了一个很好的解决方案，但需要更多的上下文描述...... 目前我还没有太多的知识。所以，我不想通过创建网站的主要 js 逻辑来犯一些重大错误。一些人在这里粘贴的每一个想法和解决方案对我来说都很有趣。 【参考方案1】：以下是几种动态加载脚本的方法：
javascript：编写自定义加载函数。 jQuery：$.getScript()。对于 CSS，请参阅 SO-Post。 require.js: 要求（模块名称） 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);
;
【讨论】：
谢谢，但如果你有一些确切的代码可以解决我的主要问题，那就更好了。很抽象，很简单） 您可以查看以下JSFiddle 以供参考。希望对你有帮助【参考方案2】：您可以在您的情况下使用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 并将脚本异步放到用户的屏幕上。
【讨论】：
谢谢。你能显示代码示例，当我们将加载：2 个异步 js、2 个 css 文件和 3 个带延迟选项的 js 文件？然后在主 js 应用程序逻辑中我有可能从所有加载的脚本中访问变量？ js文件必须通过当前页面暴露的html数据属性加载。 @vital 你应该向我们展示你尝试过什么但没有成功？只有这样我们才能帮助你，我刚刚发布了一条路径。 这里有更多解释：***.com/questions/34413940/…以上是关于通过html标签数据属性动态加载js、css文件的主要内容，如果未能解决你的问题，请参考以下文章
jsoup怎么解析javascript动态改变html标签的属性值
DHTML 动态HTML 包含HTML CSS JavaScript dom