在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