首页通过按钮选择调用不同模板的js代码
1个回答
展开全部
可以动态创建script元素，然后添加到head元素中，这样可以动态加载javascript文件。示例代码如下：
1) t.htm文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试页面</title>
<script type="text/javascript" id="lnkJs" src="a.js"></script>
<script type="text/javascript">
function LoadClk() {
var head = document.getElementsByTagName("head")[0], js = document.createElement("script");
js.type = "text/javascript";
js.src = document.getElementById("jsFile1").checked ? "a.js" : "b.js";
head.appendChild(js);
}
</script>
</head>
<body>
要载入的脚本文件:<input type="radio" name="jsFile" id="jsFile1" autocomplete="off" checked="true" /><label for="jsFile1">File A</label>
<input type="radio" name="jsFile" id="jsFile2" autocomplete="off" /><label for="jsFile2">File B</label>
<input type="button" value="载入脚本文件" onclick="LoadClk();" /><br />
<input type="button" onclick="SayHello();" value="测试调用" />
</body>
</html>
2) a.js文件
window.SayHello = function() {
window.alert("来自a.js的消息!");
}
3) b.js文件window.SayHello = function() {
window.alert("来自b.js的消息!");
}
将此3文件放同一目录下, 在浏览器中浏览t.htm(允许执行JavaScript, ActiveX). 页面如下:
按"载入脚本文件"就是载入所选的那个文件; 按测试调用按钮是验证是否载入正确的文件.
1) t.htm文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试页面</title>
<script type="text/javascript" id="lnkJs" src="a.js"></script>
<script type="text/javascript">
function LoadClk() {
var head = document.getElementsByTagName("head")[0], js = document.createElement("script");
js.type = "text/javascript";
js.src = document.getElementById("jsFile1").checked ? "a.js" : "b.js";
head.appendChild(js);
}
</script>
</head>
<body>
要载入的脚本文件:<input type="radio" name="jsFile" id="jsFile1" autocomplete="off" checked="true" /><label for="jsFile1">File A</label>
<input type="radio" name="jsFile" id="jsFile2" autocomplete="off" /><label for="jsFile2">File B</label>
<input type="button" value="载入脚本文件" onclick="LoadClk();" /><br />
<input type="button" onclick="SayHello();" value="测试调用" />
</body>
</html>
2) a.js文件
window.SayHello = function() {
window.alert("来自a.js的消息!");
}
3) b.js文件window.SayHello = function() {
window.alert("来自b.js的消息!");
}
将此3文件放同一目录下, 在浏览器中浏览t.htm(允许执行JavaScript, ActiveX). 页面如下:
按"载入脚本文件"就是载入所选的那个文件; 按测试调用按钮是验证是否载入正确的文件.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
