在 <script type="text/template"> 标签中包含 <script> 标签答案

【问题标题】：Including <script> tag in <script type="text/template"> tag在 <script type="text/template"> 标签中包含 <script> 标签
【发布时间】：2013-01-10 15:22:25
【问题描述】：

我是一名新程序员，我有一个小问题。这是我的代码的一部分：

<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 页面中根本不适合我。

谢谢...:)

【问题讨论】：

请提供 location.js 脚本
你不能那样做——这取决于你的模板系统，但不知何故你必须“保护”模板中的</script>标签。但是，通常从模板内部导入脚本是非常值得怀疑的。
你想要完成什么？您有 div 和一个嵌套在脚本标签内的脚本标签，这可能是无效标记，对我来说毫无意义。
你需要动态重新加载你的 JS 文件
我在谈论任何脚本。甚至像这样的脚本：就像我说我是一个新程序员，我真的不知道该怎么做......:) 我的意思是，现在当我打开页面时，我在 1.html 中，当我点击主页按钮时例如，它将我传送到 home.html 页面，现在页面加载完美，但页面中的脚本（“location.js”）根本不起作用。我怎样才能让它在 home.html 中工作？ Aaron Kurtzhals 我很抱歉，就像我说我不知道我不能将脚本标签嵌套在脚本标签内。正因为如此，我在问我的问题。它是如何工作的？

标签： javascript html templates

【解决方案1】：

不，这对你不起作用。在另一个<script> 中包含<script></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);
}

【讨论】：

rgthree 非常感谢！我正在寻找这个解决方案 3 天！还有一个问题，如果我想加载到 id="home" 页面不止一个脚本，我需要做什么：我的意思是如果我想加载“location.js”和“location1.js”？
是的，我已经为你设置好了。 data-jsassets 属性设置为要加载的路径的逗号分隔列表。因此，您将有data-jsassets="location.js,location1.js" 来加载这两个文件。如果这是您要找的，请随时接受我的回答；）

【解决方案2】：

HTML 无法在脚本元素中包含序列</script>。

XHTML 允许您使用 CDATA 标记或实体，但这不是 HTML 的选项。（请注意，用作 text/html 的 XHTML 不提供此选项，浏览器将使用 HTML 解析器）。

脚本内部使用的语言需要提供一种机制来避免该问题。

例如，在 JavaScript 中，/ 和 \/ 在字符串中的含义相同，因此您可以使用 "<\/script>"。

text/template 不是标准的 MIME 类型。想必是页面上某些JS使用的自定义模板格式。 JS 在解析模板时需要支持某种形式的转义机制。您可能必须扩展您使用的任何库来处理您的模板。

【讨论】：

【解决方案3】：

将您的模板包装在<template> 标记中。

<template id="home">
   <script></script>
</template>

【讨论】：

在您更好地了解模板标签的作用、它与文本/模板脚本标签的区别以及有限的浏览器支持之前，请停止建议。

【解决方案4】：

抱歉，这不是语法的工作方式。你的<script type="text/template">

仅适用于 html。

将带有您的逻辑的脚本放在模板标签之外，您将可以顺利工作。

【讨论】：