在Django中的渲染HTML中隐藏Javascript模板

时间:2015-10-16 03:56:01

标签: jquery html django

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

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

我在chrome web浏览器中使用 HTML inspect元素。从被视为客户端的 HTML 源代码中,它包含整个javascript模板源代码。我认为最好不要让用户只是通过检查来自客户端的呈现 HTML 的代码来查看此javascript模板源代码(下面列出)。

如何从客户端隐藏这段源代码? 通过隐藏,这意味着我们通常只会看到这种内容"<script src="/static/js/jquery.fileupload-image.js"></script>&#34;没有完整的源代码。我不知道如何将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;
}

更新 这是项目中定义的类型x-tmpl&#39; templatetags / upload_tags.py 在上传任何图像之前,这部分代码不会在HTML中呈现!

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

再次更新

通过将类型更改为&#39; text / javascript&#39;,HTML页面中会出现语法错误。

Uncaught SyntaxError: Unexpected token %

原因是有&#39;%}&#39;用于django模板upload_tags.py

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

1 个答案:

答案 0 :(得分:0)

错误

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