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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14261232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 21:09:53  来源:igfitidea点击:

Including <script> tag in <script type="text/template"> tag

javascripthtmltemplates

提问by Danny

I am a new programmer and I have a little question. This is a part of my code:

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

<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>

My question is how can I use this "location.js" script tag in the html page (id="home") when I call this html page with innerHTML and I change the current appear page? No matter what I have done this script doesn't work for me at all in the html page.

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

Thank you...:)

谢谢...:)

采纳答案by rgthree

No, that's not going to work for you. Not only is it invalid to have a <script></script>inside of another <script>, it wouldn't work even if the browser could parse it correctly. However, all you need to do is provide the javascript files you want to load in another manner, like in a datasetattribute. Additionally, as Quentin pointed out, text/templateisn't a standard type, so prefix it with x-as standard practice

不,这对你不起作用。拥有<script></script>另一个内部不仅无效,<script>即使浏览器可以正确解析它也不起作用。但是,您需要做的就是以另一种方式提供要加载的 javascript 文件,例如在dataset属性中。此外,正如昆汀指出的那样,text/template它不是标准类型,因此将其x-作为标准做法作为前缀

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

Now, retrieve the comma-delimted list of javascript to load and inject it into the page, which will run the 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);
}

回答by Quentin

HTML provides no means to include the sequence </script>inside a script element.

HTML 没有提供将序列包含在</script>脚本元素中的方法。

XHTML allows you to use CDATA markers or entities, but that isn't an option for HTML. (Note that XHTML served as text/html does not provide this option and browsers will use an HTML parser).

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

The language used inside the script needs to provide a mechanism to avoid the problem.

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

In JavaScript, for instance, /and \/mean the same thing inside a string, so you can "<\/script>".

例如,在 JavaScript 中,/\/在字符串中表示相同的意思,因此您可以"<\/script>".

text/templateisn't a standard MIME type. Presumably it is a custom template format used by some JS on the page. That JS would need to support some form of escaping mechanism when it is parsing the template. You may have to extend whatever library you are using to process your template.

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

回答by rgthree

Sorry but that isn't how the syntax works. Your <script type="text/template">

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

is only for html.

仅适用于 html。

put the script with your logic outside of the template tag and you'll be working smooth.

将带有您的逻辑的脚本放在模板标签之外,您就会顺利工作。

回答by Reza Salarmehr

Wrap your template in <template>tag.

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

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