讨论:smarty模板与javascript问题

我的是一个留言板程序,要求可以使用ubb代码,js代码也包含在这个文件就可以正常显示
a.htm:
<title>给我留言</title>
</head>
<body>
{literal}
<script language="javaScript" >
var text = "";
function getActiveText(selectedtext) {
  text = (document.all) ? document.selection.createRange().text : document.getSelection();
  if (selectedtext.createTextRange) {
    selectedtext.caretPos = document.selection.createRange().duplicate();
  }
return true;
}
function submitonce(theform)
{
if (document.all||document.getElementById)
{
for (i=0;i<theform.length;i++)
{
var tempobj=theform.elements[i];
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
tempobj.disabled=true;
}
}
}
function checklength(theform)
{
alert("你的信息已经有 "+theform.content.value.length+" 字节.");
}
function AddText(NewCode) 
{
if (document.FORM.content.createTextRange && document.FORM.content.caretPos) 
{
var caretPos = document.FORM.content.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? NewCode + ' ' : NewCode;
} 
else 
{
document.FORM.content.value+=NewCode
}
setfocus();
}
function setfocus()
{
  document.FORM.content.focus();
}
defaultmode = "divmode";if (defaultmode == "nomode") {
        helpmode = false;
        divmode = false;
        nomode = true;
} else if (defaultmode == "helpmode") {
        helpmode = true;
        divmode = false;
        nomode = false;
} else {
        helpmode = false;
        divmode = true;
        nomode = false;
}
function checkmode(swtch){
        if (swtch == 1){
                nomode = false;
                divmode = false;
                helpmode = true;
                alert("Wm 代码 - 帮助信息\n\n点击相应的代码按钮即可获得相应的说明和提示");
        } else if (swtch == 0) {
                helpmode = false;
                divmode = false;
                nomode = true;
                alert("Wm 代码 - 直接插入\n\n点击代码按钮后不出现提示即直接插入相应代码");
        } else if (swtch == 2) {
                helpmode = false;
                nomode = false;
                divmode = true;
                alert("Wm 代码 - 提示插入\n\n点击代码按钮后出现向导窗口帮助您完成代码插入");
        }
}
function showsize(size) {
if (helpmode) {
alert("文字大小标记\n设置文字大小.\n可变范围 1 - 6.\n 1 为最小 6 为最大.\n用法: [size="+size+"]这是 "+size+" 文字[/size]");
} else if (nomode || document.selection && document.selection.type == "Text") {
AddTxt="[size="+size+"]"+text+"[/size]";
AddText(AddTxt);
} else {
txt=prompt("大小 "+size,"文字");
if (txt!=null) {
AddTxt="[size="+size+"]"+txt;
AddText(AddTxt);
AddTxt="[/size]";
AddText(AddTxt);
}
}
}function showfont(font) {
  if (helpmode){
alert("字体标记\n给文字设置字体.\n用法: [font="+font+"]改变文字字体为"+font+"[/font]");
} else if (nomode || document.selection && document.selection.type == "Text") {
AddTxt="[font="+font+"]"+text+"[/font]";
AddText(AddTxt);
} else {
txt=prompt("要设置字体的文字"+font,"文字");
if (txt!=null) {
AddTxt="[font="+font+"]"+txt;
AddText(AddTxt);
AddTxt="[/font]";
AddText(AddTxt);
}
}
}
function showcolor(color) {
if (helpmode) {
alert("颜色标记\n设置文本颜色.  任何颜色名都可以被使用.\n用法: [color="+color+"]颜色要改变为"+color+"的文字[/color]");
} else if (nomode || document.selection && document.selection.type == "Text") {
AddTxt="[color="+color+"]"+text+"[/color]";
AddText(AddTxt);
} else {  
      txt=prompt("选择的颜色是: "+color,"文字");
if(txt!=null) {
AddTxt="[color="+color+"]"+txt;
AddText(AddTxt);
AddTxt="[/color]";
AddText(AddTxt);
}
}
}
}function showcode() {
if (helpmode) {
alert("代码标记\n使用代码标记,可以使你的程序代码里面的 html 等标志不会被破坏.\n使用方法:\n [code]这里是代码文字[/code]");
} else if (nomode || document.selection && document.selection.type == "Text") {
AddTxt="\r\n[code]"+text+"[/code]";
AddText(AddTxt);
} else {
txt=prompt("输入代码","");
if (txt!=null) { 
AddTxt="\r[code]"+txt;
AddText(AddTxt);
AddTxt="[/code]";
AddText(AddTxt);
}
}
}
.......
</script>
{/literal}
{ section name=note loop=$notes }
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#666666">
  <tr bgcolor="#FFFFFF">
    <td width="20%">姓名:{ $notes[note].name }</td>
    <td width="24%">Email:{ $notes[note].email}</td>
    <td width="35%">留言日期:{ $notes[note].time}</td>
<td width="21%">登陆IP:{ $notes[note].ip}</td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td colspan="4">留言:<br>{ $notes[note].text}</td>
  </tr>
</table>
<hr align="center" width="75%" size="0">
{ /section}
<table width="75%"  border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#333333">
 <form name='FORM'action='index.php' method="post">
  <tr bgcolor="#FFFFFF">
    <td>姓名:<input type="text" name="lname" ></td>
    <td>Email:<input type="text" name="lmail" ></td>
<input  type="hidden" name="flag" value="1">
  </tr>
  <tr>
    <td colspan="2" bgcolor="#FFFFFF">字体:
                        <select onchange="showfont(this.options[this.selectedIndex].value)" size="1" name="font">
                            <option value="no" selected>请选择字体</option>
                            <option value="宋体">宋体</option>
                            <option value="Impact">Impact</option>
                            <option value="Tahoma">Tahoma</option>
                            <option value="Times New Roman">Times New Roman</option> 
</select>
字号:
<select onchange="showsize(this.options[this.selectedIndex].value)" size="1" name="size">
                            <option  value="no"selected>请选择字号</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="18">18</option>
                            <option value="36">36</option>
                            <option value="72">72</option>
                            </select>
  颜色:<select onchange="showcolor(this.options[this.selectedIndex].value)" size="1" name="color">
                            <option value="no" selected>请选择颜色</option>
                            <option style="color: #000000; background-color: #000000" value="#000000">
                            #000000</option>
                            <option style="color: #ffffff; background-color: #ffffff" value="#FFFFFF">                            #FFFFFF</option>
                            <option style="color: #ff0000; background-color: #ff0000" value="#FF0000">
                            #FF0000</option>
                            <option style="color: #00ff00; background-color: #00ff00" value="#00FF00">
                            #00FF00</option>
                            <option style="color: #0000ff; background-color: #0000ff" value="#0000FF">
                            #0000FF</option>
                            <option style="color: #00ffff; background-color: #00ffff" value="#00FFFF">
                            #00FFFF</option>
                            </select></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#FFFFFF">留言:<textarea name="content" cols="70" rows="7" onkeydown="quickpost();" onfocus="getActiveText(this);" onclick="getActiveText(this);"  onchange="getActiveText(this);"></textarea></td>
 </tr>
  <tr>
    <td colspan="2" bgcolor="#FFFFFF">

       <input type="submit" value="留言"> <input type="reset" value="清除"></td>
  </tr>
  
  </form>
</table>
<p>&nbsp;</p>
</body>
</html>

解决方案 »

  1.   

    如果把那段javascript全集中在一个文件里,比如code.js 再在a.htm调用,就无法正确使用,我是这样写a.htm的:<html>
    <script language="javaScript" src="code.js" type="text/javascript"></script>
    //其他html标签
    </html>这样写也不正确:
    {literal} <script language="javaScript" src="code.js" type="text/javascript"></script>{/literal}
      

  2.   

    这里有个路径问题：
    通常模板文件是放在templates目录下的，所以你若<script language="javaScript" src="code.js" type="text/javascript"></script>则code.js应该也在templates目录下，否则调试模板时就要出错
    而编译后的程序是在上级目录下执行的，而你的code.js却在templates目录下，这样就找不到了。所以就出错啦！
      

  3.   

    可以去检查一下template_c下中间生成的文件还有最终的文件，看看什么问题
      

  4.   

    xuzuning(唠叨)请问有什么好的解决方法呢?如果两个目录下都放一个code.js的话是否可行?就算可行也未免笨了点啊
      

  5.   

    你把smarty的标签由{}
    改为<{}>就不会有冲突了
      

  6.   

    我用的时候，work/smart/temp/aa.htm
    我在aa.htm调用aa.js
    aa.js放在work/下面
    就没有问题
      

  7.   

    请问有什么好的解决方法呢?如果两个目录下都放一个code.js的话是否可行?就算可行也未免笨了点啊是的“如果两个目录下都放一个code.js的话当然可行”，也确实“笨了点啊”
    你可能需要将js文件的路径“动态化”。其实并不止是js文件路径，图片文件路径、样式表文件路径等都存在这个问题。我的解决办法比较另类，仅供参考：
    我们知道文件名中是可以存在“{”、“}”字符的，因此可将js文件路径写做{scripts}/code.js
    root
     +- 程序文件
     +- templates
          +- 模板文件
          +- {scripts}
               +- code.js
    调试时：<script src="{scripts}/code.js"></script>这样不会产生问题
    php文件执行时对模板变量scripts赋值为“templates/{scripts}”，这样路径也不会出现问题当然你完全可以修改smarty，让他能够识别并处理这类路径问题
    注意：并不是smarty才有这个问题，所有的模板引擎都有这个问题的
      

  8.   

    请教唠叨老大，用SMARTY时我习惯于图片及JS文件路径时使用/由站点的根目录开始的绝对路径，这样好吗？
    而在PHP中requiry_once（）文件时，我也由webconfig.php文件设定为硬盘的根目录开始，这样又好吗？请老大指教.....
      

  9.   

    to caaclxf(有人说我的名字很长) 
    使用从网站根开始的路径当然是良好的习惯
    只是当模板被放在独立的目录中时将给模板的调试带来不便，不过借助dw等软件进行调试应该不是问题