堆棧內存溢出
  簡體   English   中英

如何在這個真實的示例中動態包含javascript？

[英]How to include javascript dynamically in this real world example?

 原文  2010-10-13 12:39:10  0   3    javascript

問題描述

我在這里閱讀了可以動態包含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>

但是在運行文檔時，只有字段沒有滑塊。 為什么呢

3 個解決方案

解決方案1
 2  2010-10-13 12:46:31

如果需要在頁面上動態添加腳本，可以通過將<script src="..."></script>標記注入<head> 。 如您所見，將腳本內容直接注入頁面是有問題的。

解決方案2
 1  2010-10-13 12:42:19

不要使用document.write。 改用.innerHTML將HTML添加到文檔中。

同樣，您不能像這樣向文檔添加javascript。 您需要對其進行eval（）處理（這是非常糟糕的做法），或者，更好的是，編寫一個可以在需要時執行的函數。

解決方案3
 0  2010-10-13 12:44:10

我認為您需要在文檔或正文onload事件中執行某些操作。

我的“普通” javascript有點生銹，所以我不會嘗試舉一個例子，盡管周圍有很多東西可以讓您有所收獲。

反正就是我的直覺。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在javascript中記憶的真實示例？ Visual / Practical / Real World在不同類型的Javascript中進行變量賦值的示例 如何在一個真實的例子中使用javascript模塊模式？ 是否有真實世界的嵌套映射示例？ 在javascript中實際使用雙向生成器 在JavaScript中使用reduceRight的真實世界示例 如何動態包含包含javascript的html文件 需要/首選事件捕獲的現實世界示例？ Caolan的異步庫系列方法的真實示例 jQuery Galleria圖像畫廊在JSON中的實際工作示例
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM