djangobyexample 书 - jquery 小书签根本不工作答案

【问题标题】：djangobyexample book - jquery bookmarklet not working at alldjangobyexample 书 - jquery 小书签根本不工作
【发布时间】：2017-10-07 16:09:04
【问题描述】：

我正在通过示例学习 Django，在一章中，在 Django 应用程序中构建了一个 jQuery 书签，以便用户可以轻松地将网站中的 jpg 图像保存到 Django 应用程序中的用户配置文件区域。

本教程确实提供了有关我所遵循的操作的确切说明，尽管我已经设法让小书签按钮出现在 Chrome 的书签栏中，但是当我在浏览带有 jpg 图像的网页时单击它时没有任何反应。

这是我本地的 Django 仪表板，其中书签按钮被添加到书签栏，这部分工作正常

这就是单击小书签时的样子，这是我单击小书签时没有任何反应的部分。（如何解决？）

https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js

我认为 JavaScript 启动器无法加载 JavaScript 文件或 JS 启动器本身未加载。

JavaScript 启动器通过锚标记内的 Django 模板标记“include”被调用。这是链接： https://github.com/davejonesbkk/bookmarks/blob/master/account/templates/account/dashboard.html

我尝试通过 CTRL+SHIFT+I 控制台调试它，但出现问题表明“包含”标签无法正常工作。

【问题讨论】：

问题中需要粘贴相关代码
如果包含标签不起作用，请在您的问题中包含完整的错误。

标签： javascript jquery python html django

【解决方案1】：

您的include 标签分为两行：

images from other websites → <a href="javascript:{% include
"bookmarklet_launcher.js" %}" class="button">Bookmark it</a><p>

Django 不支持多行标签。将其更改为：

images from other websites → <a href="javascript:{% include "bookmarklet_launcher.js" %}" class="button">Bookmark it</a><p>

【讨论】：

【解决方案2】：

我在阅读这本书时遇到了类似的错误。

书签按钮不起作用，当我通过 chrome 调试器对其进行调试时，我可以看到 js 级别的错误。我进行了两项更改来解决这些错误。

1.错误信息：net::ERR_ABORTED

操作步骤： 书中提到将 bookmarklet.js 放在 images 应用程序目录中，但在 bookmarklet_launcher.js 中引用了以下路径

http://127.0.0.1:8000/static/js/bookmarklet.js?r=

所以将 bookmarklet.js 放在图像应用程序内的/static/js/ 目录中（如果文件夹结构不可用，请创建它）。

2.错误信息：net::ERR_ABORTED

应该放置另外一个文件，即 bookmarklet.css，该文件在 bookmarklet.js 的下一行被引用。

href: static_url + 'css/bookmarklet.css?r=' + Math.floor(Math.random()*99999999999999999999)

操作步骤：

在/static/css/目录中创建一个bookmarklet.css文件，并放置css代码。css代码请参考以下链接：

Git Hub link for css code reference

1.完成以上步骤后，重启开发服务器。

2.拖动书签按钮在浏览器中创建书签。

3.打开任何HTTP（不是https）的网站并点击书签（在浏览器中加入书签的不是书签按钮）。

4.出现如下弹窗

【讨论】：

【解决方案3】：

问题是模板不存在，所以请尝试执行以下操作 ** 1.确保您的包含代码在同一行 2. 确保您的项目主管/images/templates/file_name.js 中存在相同的模板名称。 3.或者去设置并将你的模板目录添加到模板中。 4.如果它加载但没有图像视图不要忘记你只接受jpeg和jpg图像 ** 这样您就可以尝试其他网站，例如 wikipedia **

【讨论】：

【解决方案4】：

我能够通过确保 bookmarklet.js 和 bookmarklet_luncher.js 中 ngrok 隧道的 url 以开头来解决这个问题https 不是 http

而不是这个http://127.0.0.1:8000/static/js/bookmarklet.js?r= 应该是

https://127.0.0.1:8000/static/js/bookmarklet.js?r=

【讨论】：

【解决方案5】：

经过 4 个小时的努力……谷歌搜索、删除代码和重写代码……

只需按 Ctrl+C 即可停止服务器并重新运行服务器。

休息一下，然后回来修复它:)

我的工作与书中的说明相同 - 没有变化，什么都没有。

只重启了服务器。

【讨论】：