How to include javascript dynamically in this real world example?
I read here it is possible to inlcude js dynamically http://www.phpied.com/javascript-include/
I wanted to try with this real example by concerting tigra slider example (see http://www.softcomplex.com/products/tigra_slider_control/multiple_slider_designs_demo.html) into dynamic code using http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/ to convert static code to dynamic one:
<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': 's开发者_开发百科liderValue1',
'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>
which will give
<!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>
But only fields appear no slider when running the document. Why ?
If you need to add a script to the page dynamically, do it by injecting a <script src="..."></script> tag into the <head>. Injecting script content directly onto the page is, as you've seen, problematic.
Don't use document.write. Use .innerHTML instead to add HTML to document.
Also you cannot add javascript to document like that. You need to eval() it (and that's very bad practice) or, much better, write a function which can be executed when you need it.
i'd presume that you need to do something in the document or body onload events.
my 'normal' javascript is a bit rusty, so i won't attempt an example, tho there are plenty around to get a feel from.
that's my gut feel anyway..
加载中,请稍侯......
精彩评论