您的位置:首页 > Web前端 > CSS

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

2017-06-22 00:00 453 查看
如果页面时从后台跳转来的,在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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  JavaScript Options