django - 在包含的模板中时 javascript 不起作用

Posted 2023-02-24

【中文标题】django - 在包含的模板中时 javascript 不起作用

【英文标题】：django - javascript not working when in an included template

【发布时间】：2016-02-19 16:24:33

【问题描述】：

我在 django 中有一个名为 base.html 的模板，它通过 % include 'gui/page.html' % 调用另一个模板

在该模板中，我有以下 javascript，它允许在设置时选择整个文本字段，例如 <p>This text I will select all</p>

<script>
$(document).ready(function()

     $('p').dblclick(function(e)

         $(this).selectText();
             e.preventDefault();

         );

         );
         jQuery.fn.selectText = function()
             this.find('input').each(function() 
                if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy'))  
                   $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
                
            $(this).prev().html($(this).val());
        );
        var doc = document;
        var element = this[0];
            console.log(this, element);
            if (doc.body.createTextRange) 
                var range = document.body.createTextRange();
                range.moveToElementText(element);
                    range.select();
             else if (window.getSelection) 
                var selection = window.getSelection();        
                var range = document.createRange();
                    range.selectNodeContents(element);
                    selection.removeAllRanges();
                    selection.addRange(range);
    
;
</script>

如果我直接访问模板@@http://localhost/gui/page.html，则 javascript 可以工作，但如果我通过http://localhost/base.html 访问它，则双击该字段不会执行任何操作。

我已经尝试在 base.html 中包含 javascript，但它仍然无法加载。通过包含的模板调用时django如何加载javascript？

【问题讨论】：

您是否验证了打开base.html 时包含gui/page.html 的内容？您是否已在浏览器中查看源代码以确保 javascript 存在？根据您使用的 URL，Apache（或您的其他服务器）似乎正在静态地提供文件 base.html，而不是允许 django 提供文件，在这种情况下，模板未被处理且不包括 gui/page.html。您的网络服务器是如何设置的？

奇怪，所以我拿了<script></script>标签并将内容放入js/scripts.js文件中，它可以工作。

听起来你的 django 应用程序没有运行。您需要从您的 django 项目目录或 mod_wsgi 或 gunicorn 调用 python manage.py runserver 来运行您的 django 项目。你在用这些吗？

什么？是的，应用程序正在运行。如果它没有运行，我将无法浏览该站点....无论如何，它正在工作。正如我所说，我将脚本放入一个静态文件并从那里加载。奇怪的是，如果我在 html 模板的标签中有脚本，它不会加载它。

你是如何启动 Django 应用程序运行的？

【参考方案1】：

刚刚遇到同样的问题。为了解决它，接下来要做的是：

在base.html中添加：

所有基本脚本，比如我们

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

添加块，例如：

% block extrascripts %% endblock %

把你的手稿发到/static/js/hand_made.js

包含在child 模板中，即我们在% include 'child_template.html' % 中使用的模板：

在顶部添加% load staticfiles % 在中间添加您的 html 最后添加

% block extrascripts %<script type="text/JavaScript" src="% static 'js/hand_made.js' %"></script>% endblock %（由于某种原因无法添加漂亮的样式）。

如果由于某些原因需要将模板中的数据提供给 JS，则需要进行下一步：

% block extrascripts %
    <script>
        var my_var_1 = " some_template_data.var_1 ",
            my_var_2 = " some_template_data.var_12 ";
    </script>
    <script type="text/JavaScript" src="%  static 'js/hand_made.js' %"></script>
% endblock %

在这种情况下，my_var_1 和 my_var_2 将在 hand_made.js 中可用

【参考方案2】：

Django 不会修改或加载模板中的任何 javascript。它只会将其传递给输出。

【讨论】：

抱歉，我确实在 HTML 上的 include 周围有引号，所以我更新以显示这一点。我的理解是我在 page.html 中的 javascript 即使在包含标签上也应该可以工作，但它不能。我如何得到它？