在<script type ="text/template">标记中包含<script>标记

Question

我是一名新程序员,我有一个小问题.这是我的代码的一部分:

<nav>
   <ul>
     <li><input type="button" value="HomePage" id="home1" data-page="home"></li>
     <li><input type="button" value="About" id="about1" data-page="about"></li>
   </ul>
</nav>

    <div id="content">
        <div class="page active">
            <div class=firstLoad>
            (some content...)
            </div>
        </div>
    </div>

<script type="text/template" id="home">
<div id="backImage">
  <div id="spinner">
</div>
<div>
   <input type="button" value="..." id="car" class="button">
</div>
<div>
   <input type="button" value="..." id="Car1" onclick="location.href='#'" class="button">
</div>
<div>
   <input type="button" value="..." id="reset" class="button">
</div>
</div>
<script src="location.js"></script>
</script>

我的问题是,当我用innerHTML调用这个html页面并更改当前显示的页面时,如何在html页面(id ="home")中使用此"location.js"脚本标记？无论我做了什么,这个脚本在html页面中根本不适用于我.

谢谢...:)

Answer 1

不，那对你不起作用。拥有<script></script>another 的内部不仅是无效的<script>，而且即使浏览器可以正确解析它也无法工作。但是，您所需要做的就是以其他方式（例如在属性中）提供要加载的 javascript 文件dataset。此外，正如 Quentin 指出的那样，text/template这不是标准类型，因此在其前面加上前缀x-作为标准做法

<script type="text/x-template" id="home" data-jsassets="location.js,/path/to/some/other.js">
   ...
</script>

现在，检索要加载的逗号分隔的 javascript 列表并将其注入到页面中，这将运行脚本：

var tpl, jsassets, tag, i,l;
tpl = document.getElementById('home');
// At this point, ensure your template has been rendered and attached to the page
// by your template processor
jsassets = (tpl.getAttribute('data-jsassets') || '').split(',');
for(i = 0, l = jsassets.length; i < l; i++){
  tag = document.createElement('script');
  tag.type = "text/javascript";
  tag.src = jsassets[i];
  document.head.appendChild(tag);
}