在Django中将Javascript模板隐藏在呈现的HTML中

Question

注意： 这还没有解决方案。请帮助，如果它在您的专业领域。

有一个有趣的项目集成了Django的JQuery-file-upload 。演示页面 https://blueimp.github.io/jQuery-File-Upload/

我使用HTML在Chrome浏览器中检查元素。从HTML被视为客户端的源代码，它包含整个JavaScript模板源代码。我认为最好不要让用户通过检查客户端呈现的HTML的代码来看到此JavaScript模板源代码（下面列出）。

该怎么做才能将这段源代码隐藏起来？ 隐藏，这意味着我们通常只看到这种内容"<script src="/static/js/jquery.fileupload-image.js"></script>“没有完整的源代码。我不知道一种方法直接转储的JavaScript模板代码到filename.js，然后将其包括到我的Django HTML模板。烦请给出具体的例子来隐藏像下面的代码从客户

<script id="template-upload" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 

    <tr class="template-upload fade"> 


     <td> 
      <span class="preview"></span> 
     </td> 



     <td> 
      <p class="name">{%=file.name%}</p> 
      <strong class="error text-danger"></strong> 
     </td> 



     <td> 
      <p class="size">Processing...</p> 
      <div class="progress progress-striped active" role="progressbar" 
        aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 
       <div class="progress-bar progress-bar-success" style="width:0%;"></div> 
      </div> 
     </td> 



     <td> 

      {% if (!i && !o.options.autoUpload) { %} 
       <button class="btn btn-primary start" disabled> 
        <i class="glyphicon glyphicon-upload"></i> 
        <span>Start</span> 
       </button> 
      {% } %} 



      {% if (!i) { %} 
       <button class="btn btn-warning cancel"> 
        <i class="glyphicon glyphicon-ban-circle"></i> 
        <span>Cancel</span> 
       </button> 
      {% } %} 

     </td> 


    </tr> 
{% } %} 
</script> 

我的Django的模板引擎如下：。

TEMPLATE_LOADERS = (
    'django.template.loaders.filesystem.Loader', 
    'django.template.loaders.app_directories.Loader', 
) 

这里是我试过，但HTML源代码仍然呈现：

script #template-upload { 
    display: none; 
} 

UPDATE： 这里是在项目的templatetags/upload_tags.py 而这部分代码的任何图像上传之前未在HTML渲染所定义的类型的X TMPL！

from django import template 

register = template.Library() 

@register.simple_tag 
def upload_js(): 
    return """ 
<!-- The template to display files available for upload --> 
<script id="template-upload" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-upload fade"> 
     <td> 
      <span class="preview"></span> 
     </td> 
     <td> 
      <p class="name">{%=file.name%}</p> 
      {% if (file.error) { %} 
       <div><span class="label label-important">{%=locale.fileupload.error%}</span> {%=file.error%}</div> 
      {% } %} 
     </td> 
     <td> 
      <p class="size">{%=o.formatFileSize(file.size)%}</p> 
      {% if (!o.files.error) { %} 
       <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div> 
      {% } %} 
     </td> 
     <td> 
      {% if (!o.files.error && !i && !o.options.autoUpload) { %} 
       <button class="btn btn-primary start"> 
        <i class="glyphicon glyphicon-upload"></i> 
        <span>{%=locale.fileupload.start%}</span> 
       </button> 
      {% } %} 
      {% if (!i) { %} 
       <button class="btn btn-warning cancel"> 
        <i class="glyphicon glyphicon-ban-circle"></i> 
        <span>{%=locale.fileupload.cancel%}</span> 
       </button> 
      {% } %} 
     </td> 
    </tr> 
{% } %} 
</script>""" 

再次更新：

通过改变类型为 'text/JavaScript的'，会出现在HTML页面中的语法错误。

Uncaught SyntaxError: Unexpected token % 

的原因是，有在Django模板使用upload_tags.py

{% for (var i=0, file; file=o.files[i]; i++) { %} 

Answer 1

这是错误 '％}'。

script #template-upload { 
    display: none; 
} 

请尝试：

script#template-upload { 
    display: none; 
} 

由于没有空间。或者只是：

#template-upload { 
    display: none; 
} 

编辑：试试这种类型。type="text/javascript"

大多数浏览器有以下CSS属性：

script { 
    display: none; 
} 

试试这个CSS。

参考：http://www.w3schools.com/tags/tag_script.asp

顺便说一句，你需要使用以下型script tag，以满足您预期的结果，如：

text/javascript (this is default) 
text/ecmascript 
application/ecmascript 
application/javascript 

这里查看完整列表：

http://www.iana.org/assignments/media-types/media-types.xhtml

编辑：请参阅如果您使用的是正确的脚本类型。

我查找type="text/x-tmpl"并没有找到。

请尝试。 http://www.iana.org/assignments/media-types/text/html

 <script id="template-upload" type="text/html"> 

http://www.iana.org/assignments/media-types/media-types.xhtml#text