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

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

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

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

例如，在JavaScript中，/和\/在字符串中表示相同的内容，因此您可以"<\/script>"。

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

Answer 2

不，那不适合你。将<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);
}

Answer 3

对不起，但这不是语法的工作原理。您的<script type="text/template">

仅用于html。

使用逻辑代码将脚本放在模板标签之外，这样您就可以顺利进行。

Answer 4

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

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

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

4 个答案: