[英]How to include javascript dynamically in this real world example?
我在这里阅读了可以动态包含js的方法http://www.phpied.com/javascript-include/
我想通过将tigra滑块示例(请参见http://www.softcomplex.com/products/tigra_slider_control/multiple_slider_designs_demo.html )协调为动态代码来尝试使用此实际示例,以使用http://accessify.com/tools-and-wizards / developer-tools / html-javascript-convertor /将静态代码转换为动态代码:
<table>
<tr>
<td>
<div style="float: left;position:relative">
<div id="slider1" style="float: left">
<script language="JavaScript">
var A_TPL = {
'b_vertical': false,
'b_watch': true,
'n_controlWidth': 120,
'n_controlHeight': 16,
'n_sliderWidth': 16,
'n_sliderHeight': 15,
'n_pathLeft': 1,
'n_pathTop': 1,
'n_pathLength': 103,
's_imgControl': 'img/blueh_bg.gif',
's_imgSlider': 'img/blueh_sl.gif',
'n_zIndex': 1
}
var A_INIT1 = {
's_form': 0,
's_name': 'sliderValue1',
'n_minValue': 0,
'n_maxValue': 100,
'n_value': 20,
'n_step': 1
}
new slider(A_INIT1, A_TPL);
</script>
</div>
<div style="float: left">
<input name="sliderValue" id="sliderValue1" type="Text" size="3" >
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="float: left;position:relative">
<div style="float: left">
<script language="JavaScript">
var A_INIT2 = {
's_form': 0,
's_name': 'sliderValue2',
'n_minValue': -50,
'n_maxValue': 50,
'n_value': 0,
'n_step': 1
}
new slider(A_INIT2, A_TPL);
</script>
</div>
<div style="float: left">
<input name="sliderValue" id="sliderValue2" type="Text" size="3">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="float: left;position:relative">
<div style="float: left">
<script language="JavaScript">
var A_INIT3 = {
's_form': 0,
's_name': 'sliderValue3',
'n_minValue': -100,
'n_maxValue': 0,
'n_value': -20,
'n_step': 1
}
new slider(A_INIT3, A_TPL);
</script>
</div>
<div style="float: left">
<input name="sliderValue" id="sliderValue3" type="Text" size="3">
</div>
</div>
</td>
</tr>
</table>
这将给
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<script language="JavaScript" src="slider.js"></script>
</head>
<body>
<form action="index.html" method="get" name="demoForm">
<script>
document.write("<table>");
document.write("<tr>");
document.write("<td>");
document.write("<div style=\"float: left;position:relative\">");
document.write("<div id=\"slider1\" style=\"float: left\">");
document.write("<script language=\"JavaScript\">");
document.write(" var A_TPL = {");
document.write(" 'b_vertical': false,");
document.write(" 'b_watch': true,");
document.write(" 'n_controlWidth': 120,");
document.write(" 'n_controlHeight': 16,");
document.write(" 'n_sliderWidth': 16,");
document.write(" 'n_sliderHeight': 15,");
document.write(" 'n_pathLeft': 1,");
document.write(" 'n_pathTop': 1,");
document.write(" 'n_pathLength': 103,");
document.write(" 's_imgControl': 'img\/blueh_bg.gif',");
document.write(" 's_imgSlider': 'img\/blueh_sl.gif',");
document.write(" 'n_zIndex': 1");
document.write(" }");
document.write("");
document.write(" var A_INIT1 = {");
document.write(" 's_form': 0,");
document.write(" 's_name': 'sliderValue1',");
document.write(" 'n_minValue': 0,");
document.write(" 'n_maxValue': 100,");
document.write(" 'n_value': 20,");
document.write(" 'n_step': 1");
document.write(" }");
document.write(" new slider(A_INIT1, A_TPL);");
document.write("<\/script>");
document.write("<\/div>");
document.write("");
document.write("<div style=\"float: left\">");
document.write("<input name=\"sliderValue\" id=\"sliderValue1\" type=\"Text\" size=\"3\" >");
document.write("<\/div>");
document.write("<\/div>");
document.write("<\/td>");
document.write("<\/tr>");
document.write("");
document.write("<tr>");
document.write("<td>");
document.write("<div style=\"float: left;position:relative\">");
document.write("<div style=\"float: left\">");
document.write("<script language=\"JavaScript\">");
document.write(" var A_INIT2 = {");
document.write(" 's_form': 0,");
document.write(" 's_name': 'sliderValue2',");
document.write(" 'n_minValue': -50,");
document.write(" 'n_maxValue': 50,");
document.write(" 'n_value': 0,");
document.write(" 'n_step': 1");
document.write(" }");
document.write(" new slider(A_INIT2, A_TPL);");
document.write("<\/script>");
document.write("<\/div>");
document.write("<div style=\"float: left\">");
document.write("<input name=\"sliderValue\" id=\"sliderValue2\" type=\"Text\" size=\"3\">");
document.write("<\/div>");
document.write("<\/div>");
document.write("<\/td>");
document.write("<\/tr>");
document.write("");
document.write("<tr>");
document.write("<td>");
document.write("<div style=\"float: left;position:relative\">");
document.write("<div style=\"float: left\">");
document.write("<script language=\"JavaScript\">");
document.write(" var A_INIT3 = {");
document.write(" 's_form': 0,");
document.write(" 's_name': 'sliderValue3',");
document.write(" 'n_minValue': -100,");
document.write(" 'n_maxValue': 0,");
document.write(" 'n_value': -20,");
document.write(" 'n_step': 1");
document.write(" }");
document.write("");
document.write(" new slider(A_INIT3, A_TPL);");
document.write("<\/script>");
document.write("<\/div>");
document.write("<div style=\"float: left\">");
document.write("<input name=\"sliderValue\" id=\"sliderValue3\" type=\"Text\" size=\"3\">");
document.write("<\/div>");
document.write("<\/div>");
document.write("<\/td>");
document.write("<\/tr>");
document.write("<\/table>");
document.write("");
</script>
<input name="Submit" type="Submit" value="Submit">
</form>
</body>
</html>
但是在运行文档时,只有字段没有滑块。 为什么呢
如果需要在页面上动态添加脚本,可以通过将<script src="..."></script>
标记注入<head>
。 如您所见,将脚本内容直接注入页面是有问题的。
不要使用document.write。 改用.innerHTML将HTML添加到文档中。
同样,您不能像这样向文档添加javascript。 您需要对其进行eval()处理(这是非常糟糕的做法),或者,更好的是,编写一个可以在需要时执行的函数。
我认为您需要在文档或正文onload事件中执行某些操作。
我的“普通” javascript有点生锈,所以我不会尝试举一个例子,尽管周围有很多东西可以让您有所收获。
反正就是我的直觉。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.