如何在smarty中调用head中的javascript代码？

Question

我有以下聪明的模板代码：

<style type="text/css">
{literal}
li{
   display:block;
}
li.tooltip
{
  position:relative;
  display:inline-block;
  cursor:pointer;
  width:300px;
  text-align:right;
}
li.tooltip > ul li.info
{
  display:none;
}
li.tooltip > ul li.info_container
{
  position:absolute;
  right:20px;
  width:200px;
  height:100px;
  display:none;
    color:#000;

}
li.tooltip ul li.info
{
  text-align:left;
  position:absolute;
  left:1px;
  right:1px;
  top:20px;
  bottom:1px;
  color:#000;
  padding:5px;
  overflow:auto;
  border:1px solid #000;
  background-color: #fff;
}
{/literal}
</style>

<div class="view-questions" id="view_test_question_form">
  <div class="breadcrumb-wrap">
    {include file='prepare-sub-menu.tpl'}
    <ul class="page-flow">
      <li><a href="{$control_url}">Home</a><span>></span></li>
      <li><a href="{$control_url}modules/practice_sheet/practice_sheet.php?op={$query_string}">Practice Sheet</a><span>></span></li>
      <li>Detail</li>
    </ul>
  </div>

  <h1 class="c-heading"> View Practice Sheet</h1>
  {if "" != $info_msg}<div class="c-msg-seccess"> {$info_msg} <a href="#" class="c-close fnClose"></a> </div>{/if}
  <div class="btn-space clear-flt" style="margin:0;">
    <a href="{$control_url}modules/practice_sheet/practice_sheet.php?op={$query_string}" name="back" id="back" class="c-btn c-gray-btn c-back-btn"><span>Back</span></a>
    {if $site_id!='ENTPRM'}
      {if $coaching_account.NO_PDF_LIMIT>0}
        <a href="{$control_url}modules/practice_sheet/pdf_practice_sheet.php?op=view&practice_sheet_id={$practice_sheet_id}" class="c-btn c-pdf-btn fl-right" target="_blank"><span>Generate PDF</span></a>
      {else}
        <a href="#" onclick="javascript:alert('You have used your available pdf limit, please contact admin.');return false;" class="c-btn c-pdf-btn fl-right"><span>Generate PDF</span></a>
      {/if}
    {else}
      <a href="{$control_url}modules/practice_sheet/pdf_practice_sheet.php?op=view&practice_sheet_id={$practice_sheet_id}" class="c-btn c-pdf-btn fl-right" target="_blank"><span>Generate PDF</span></a>
    {/if}
  </div>   

  <!-- /. SOF que-answer-wrap -->
  <div class="que-answer-wrap"> 
  {if $practice_details}
    {foreach from=$practice_details item=practice_sheet_data key=subject_name}
      <h3><strong>Subject :</strong> {$subject_name}</h3>

      {foreach from=$practice_sheet_data.topics item=topic_details}
        <h3><strong>Topic : </strong>{$topic_details.topic_name}</h3>

        {if $topic_details.practice_topics_ques}
        <table class="base-table selection-table" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:15px;">
        {assign var='que_seq_no' value=1}
        {foreach from=$topic_details.practice_topics_ques item=question_data}
          {foreach from=$question_data item=qstn_ans key=key}
            <tr class="{cycle values="evenRow, oddRow"}" id="{$qstn_ans.question_id}">
              <td class="question">
                <ul class="tabl-head">
                  <li>Question {$que_seq_no}.</li>
                  <li class="center-align tooltip"><span>Report question issue - {$search_ques_id_str}{$qstn_ans.question_id}</span>
                    <ul class="tooltipText">
        <li class='info'>Some text to fill the box with.</li>
          </ul></li>                          
                  <li class="right-align"><a class="change_ps_question" href="change_practice_sheet_question.php?question_id={$qstn_ans.question_id}&practice_sheet_id={$practice_sheet_id}"><label class="bright" style="cursor:pointer;" >Change Question</label></a></li>
                </ul>                        

               <ul class="options w-auto">   
                 {if $qstn_ans.question_directions|trim!=""}
                 <li><strong>Direction:</strong><span>{$qstn_ans.question_directions}</span></li>
                 {/if}
                 <li><strong>Question:</strong>{$qstn_ans.question_text}
                 {if $qstn_ans.question_file}<img src="{$ques_thum_image_path}{$qstn_ans.question_id}_{$qstn_ans.question_file}" />{/if}
                 </li> 

                 {if $qstn_ans.question_has_sub_ques==0}
                   {if $qstn_ans.answer}
                     <li><strong>Answer:</strong>
                     {foreach from=$qstn_ans.answer item=ans key=ans_no}
                       <p>
                        {if $ans.answer_is_right==1}{assign var='correct_ans' value=$ans_no+1}{/if}
                          <b style="font-size:13px;">{$ans_no+1}.</b>&nbsp;&nbsp;{if $ans.answer_text!=''}{$ans.answer_text}{/if}<br />
                          {if $ans.answer_file!=''}<img src="{$ans_thumb_img_path}{$ans.answer_id}_{$ans.answer_file}" />{/if}
                       </p>  
                     {/foreach}
                    </li>
                    <li><strong>Correct Answer Option : {$correct_ans}</strong></li>
                  {/if}
                 {else}
                   {if $qstn_ans.question_has_sub_ques==1 && $qstn_ans.sub_question}
                     {foreach from=$qstn_ans.sub_question item=sub_ques_ans key=sub_ques_no}
                     <li><strong>Sub-question {$que_seq_no}.{$sub_ques_no+1}</strong>{$sub_ques_ans.question_text}
                      {if $sub_ques_ans.question_file!=''}
                        <br /><img src="{$ques_thum_image_path}{$sub_ques_ans.question_id}_{$sub_ques_ans.question_file}">
                      {/if}
                     </li>
                     {if $sub_ques_ans.answer}
                       <li>
                         <strong>Answer:</strong>
                         {foreach from=$sub_ques_ans.answer item=sub_ans key=sub_ans_no}
                          <p>
                            {if $sub_ans.answer_is_right==1} {assign var='correct_sub_ans' value=$sub_ans_no+1} {/if}
                            <b style="font-size:13px;">{$sub_ans_no+1}&nbsp;.&nbsp;</b>{if $sub_ans.answer_text!=''}{$sub_ans.answer_text}{/if}<br />
                          {if $sub_ans.answer_file!=''}<img src="{$ans_thumb_img_path}{$sub_ans.answer_id}_{$sub_ans.answer_file}" >{/if}
                          </p>
                        {/foreach}
                       </li>
                       <li><strong>Correct Answer Option : {$correct_sub_ans}</strong></li>
                      {/if}    
                    {/foreach}
                  {/if}   
                {/if}
              </ul>
             {assign var='que_seq_no' value=$que_seq_no+1}
             {/foreach}
              </td>
              </tr>
               {/foreach}       
            {else}   
            <tr><td>Questions are not available</td></tr>
            {/if}
            </table>
            <br />
          {/foreach}
        {/foreach}
        <table border="0" cellpadding="5" cellspacing="0" align="center" width="99%">
          <tr><td>&nbsp;</td></tr>
          <tr>
            <td align="center" height="10"></td>
           </tr>
        </table>
      {/if}
  </div>  
  <!-- /. EOF que-answer-wrap -->
</div>
{literal}
<script type="text/javascript">
"use strict";

function click(event) {
    var elem = this.parentNode.querySelector('.info_container');
    if (elem) 
        elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}

function toolify() {
    console.log("toolfiy",arguments)
    var idx,
    len,
    elem,
    info,
    text,
    elements = document.querySelectorAll('li.tooltip'),
        canvas,
        imgurl,
        pointer,
        tipHeight = 20,
        tipWidth = 20,
        width = 200,
        height = 100,
        ctx;

    // Create a canvas element where the triangle will be drawn
    canvas = document.createElement('canvas');
    canvas.width = tipHeight;
    canvas.height = tipWidth;
    ctx = canvas.getContext('2d');

    ctx.strokeStyle = '#000'; // Border color
    ctx.fillStyle = '#fff'; // background color
    ctx.lineWidth = 1;

    ctx.translate(-0.5, -0.5); // Move half pixel to make sharp lines
    ctx.beginPath();
    ctx.moveTo(1, canvas.height); // lower left corner
    ctx.lineTo(canvas.width, 1); // upper right corner
    ctx.lineTo(canvas.width, canvas.height); // lower right corner
    ctx.fill(); // fill the background
    ctx.stroke(); // stroke it with border
    //fix bottom row
    ctx.fillRect(0, canvas.height - 0.5, canvas.width - 1, canvas.height + 2);

    // Create a div element where the triangel will be set as background
    pointer = document.createElement('li');
    pointer.style.width = canvas.width + 'px';
    pointer.style.height = canvas.height + 'px';
    pointer.innerHTML = '&nbsp;' // non breaking space
    pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
    pointer.style.position = 'absolute';
    pointer.style.top = '2px';
    pointer.style.right = '1px';
    pointer.style.zIndex = '1'; // place it over the other elements

    console.log(elements.length);
    for (idx = 0, len = elements.length; idx < len; ++idx) {
        elem = elements[idx];
        elem.querySelector('span').addEventListener('click', click);
        text = elem.querySelector('ul li.info');
        // Create a new div element, and place the text and pointer in it
        info = document.createElement('li');
        text.parentNode.replaceChild(info, text);
        info.className = 'info_container';
        info.appendChild(pointer.cloneNode());
        info.appendChild(text);
        text.style.display = 'block';
        //info.addEventListener('click',click);
    }
}
window.addEventListener('load', toolify);
</script>
{/literal}

实际上，我想从head部分调用JavaScript代码，而不是在"Onload“上。这里的主要问题是，当我包含一个名为headr.tpl的文件时，所有必要的jquery库等都会自动加载。这一切都写在head部分。那么我该如何运行这段代码呢？作为参考，我提供了我为上述smarty模板的等效jsFiddle创建的HTML。Fiddle

所以我的问题是，在做了哪些更改后，代码将正常运行？

Answer 1

如果你想在加载之前而不是之后调用toolify (就像window.addEventListener('load', toolify);所做的那样)，只要把<script type="text/javascript">toolify();</script>放在你想要的任何地方。但您必须知道，如果不先加载toolify使用的HTML元素，这将根本不起作用。