后台跳转的页面动态加载js文件和css脚本

最新推荐文章于 2020-04-16 21:23:57 发布

转载最新推荐文章于 2020-04-16 21:23:57 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/hfq/blog/995564

文章标签：

#java #javascript #ViewUI

本文介绍了在网页中动态加载JavaScript和CSS文件及代码的多种方法。通过创建`<script>`和`<link>`元素，并利用JavaScript进行操作，可以实现按需加载资源，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

如果页面时从后台跳转来的，在jsp页面中不能直接引入js，需要动态加载

最简单最有效的办法就是写一个空jsp文件，只写js代码，跟业务页面放同一个目录，然后动态包含进来即可

<%@ include file="test-js.jsp" %>

=====当然也可以使用下面的办法===动态加载js文件
方法一：动态加载js文件
// 动态加载js脚本文件
function loadScript(url) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
// 测试
loadScript("javascript/lib/cookie.js");

写在jquery页面加载函数函数中，如

$(function(){
   loadScript("${staticPath}/static/biz/testuser.js");
});
方法二：动态加载js脚本
// 动态加载js脚本
function loadScriptString(code) {
var script = document.createElement("script");
script.type = "text/javascript";
try{
// firefox、safari、chrome和Opera
script.appendChild(document.createTextNode(code));
}catch(ex) {
// IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
script.text = code;
}
document.body.appendChild(script);
}
// 测试
var text = "function test(){alert('test');}";
loadScriptString(text);
test();
动态加载css文件
方法一：动态加载css文件
// 动态加载css文件
function loadStyles(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
// 测试
loadStyles("css/secondindex.css");
方法二：动态加载css脚本
// 动态加载css脚本
function loadStyleString(cssText) {
var style = document.createElement("style");
style.type = "text/css";
try{
// firefox、safari、chrome和Opera
style.appendChild(document.createTextNode(cssText));
}catch(ex) {
// IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
style.styleSheet.cssText = cssText;
}
document.getElementsByTagName("head")[0].appendChild(style);
}
// 测试
var css = "body{color:blue;}";
loadStyleString(css);