如果 URL 不是 home/root，则 Javascript 代码不起作用
Posted
技术标签:
【中文标题】如果 URL 不是 home/root，则 Javascript 代码不起作用【英文标题】：Java Script code not working if URL is not home/root 【发布时间】：2017-06-02 03:57:36 【问题描述】：我有一个顶部导航栏的 java 脚本代码。该代码仅在我位于网站的根目录（主页）时才有效。例如，如果您单击右上角的加号图标，您将被带到另一个页面，然后菜单停止工作。我现在不擅长 JS，我不知道为什么。我猜这可能是由于某些元素在 url 不同时未加载，但我无法修复它。我将发布 CSS 和 html 代码以查看 SCRIPTS 的放置位置。关于 html 文件正文中的脚本的一个事实是，由于菜单再次停止工作，我无法将其移动到正文之外。我认为原因是一样的，但我无法解决它。
请给我一个编辑过的代码，因为在另一个问题中人们给了我一些想法，而我尝试了所有这些但没有一个成功。这只是为了确保任何答案都是有效的答案，而不仅仅是预感。谢谢！
这是一个已部署网站的链接，您可以使用它进行试验和错误：
http://ejeddi.pythonanywhere.com/
js:
var cbpHorizontalMenu =(function()
var b = $("#cbp-hrmenu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f()
g.on('click', a);
b.on('click', function(h)
h.stopPropagation()
)
function a(j)
if (d !== -1)
b.eq(d).removeClass("cbp-hropen")
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h)
i.removeClass("cbp-hropen");
d = -1
else
i.addClass("cbp-hropen");
$("cbp-hropen");
d = h;
c.off('click').on('click', e)
return false
function e(h)
b.eq(d).removeClass("cbp-hropen");
d = -1
return
init: f
)();
基础 html：
% load staticfiles %
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
% block meta_tags %% endblock meta_tags%
<title>
% block title %BPM App% endblock title %
</title>
% block stylesheets %
<link type="text/javascript" href="% static 'bpmapp/js/topnavbar.js' %">
<link rel="shortcut icon" type="image/png" href="STATIC_URL/favicon.ico"/>
% endblock %
% block javascript %
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function()
cbpHorizontalMenu.init();
);
</script>
% endblock javascript %
% block extra_head %% endblock %
</head>
<body>
<header class="navbar topnavbar">
% include 'bpmapp/_topnavbar.html' %
</header>
<div id="main" role="main">
<div class="container">
% block content %
% endblock content %
</div>
</div> # /#main #
<script type='text/javascript' src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script>
</body>
</html>
顶部导航栏 html
% load static %
% load staticfiles %
<head>
<link rel="stylesheet" type="text/css" href="% static 'bpmapp/css/topnav-default.css' %">
<link rel="stylesheet" type="text/css" href="% static 'bpmapp/css/topnav-component.css' %">
<!-- used for icons in navbar -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="container">
<header class="clearfix">
<!--<span>Tagline</span>-->
<a href="/"><i class="fa fa-home fa-2x" id="icon-home"> </i></a>
<nav>
<a href="/process_new/"> <i class="fa fa-plus fa-2x" id="icon-new-process" data-info="New Process"></i> </a>
<!--
<a href="http://tympanus.net/Blueprints/FullWidthImageSlider/" class="icon-arrow-left" data-info="previous Step">Previous Blueprint</a>
<a href="http://tympanus.net/codrops/?p=14426" class="icon-drop" data-info="Next Step">back to the Codrops article</a>
-->
</nav>
</header>
<div class="nav-main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">Products</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Downloads</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Education & Learning</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Holy Cannoli</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Applications</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Projects</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Holy Cannoli</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
顶部导航栏默认 CSS：
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face
font-family: 'fontawesome';
src:url('../fonts/fontawesome.eot');
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
url('../fonts/fontawesome.woff') format('woff'),
url('../fonts/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
body, html font-size: 100%; padding: 0; margin: 0;
/* Reset */
*,
*:after,
*:before
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after
content: " ";
display: table;
.clearfix:after
clear: both;
body
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
a
color: #f0f0f0;
text-decoration: none;
a:hover
color: yellow;
transform: scale(1.2);
.container
padding-top:0px;
.container > header
width: 90%;
max-width: 70em;
margin: 0 auto; /* remove auto to push the h1 text to left*/
padding: 0 0.5em 0.5em 0.5em;
/* Brand Name Text */
.container > header h1
font-size: 1.5em;
line-height: 1.3;
margin: 0;
float: left;
font-weight: 400;
margin-top:0;
.container > header span
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.1em 0.1em;
.container > header nav
float: right;
text-align:bottom;
padding-top:0.1em;
/* next previous icons*/
/*
.container > header nav a
display: block;
float: left;
position: relative;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
color: transparent;
margin: 0 0.5em;
border: 4px solid #47a3da;
text-indent: -8000px;
*/
/* after click next previous icons*/
.container > header nav a:after
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
opacity: 0;
pointer-events: none;
.container > header nav a:hover:after
opacity: 1;
/* hover next previous icons*/
/*
.container > header nav a:hover
background: #47a3da;
*/
.icon-drop:before,
.icon-arrow-left:before
font-family: 'fontawesome';
position: absolute;
top: 0;
width: 100%;
height: 100%;
speak: none;
font-style: normal;
font-weight: normal;
line-height: 2;
text-align: center;
color: #47a3da;
-webkit-font-smoothing: antialiased;
text-indent: 8000px;
padding-left: 8px;
.container > header nav a:hover:before
color: #fff;
.icon-drop:before
content: "\e000";
.icon-arrow-left:before
content: "\f060";
.fa
color:#999;
transition: all .2s ease-in-out;
.fa:hover
color: #47a3da;
/*color:rgb(20,220,180); ----- green ----- */
transform: scale(1.2);
顶部导航栏组件 CSS：
/* menu separator */
.cbp-hrmenu
width: 100%;
margin-top: 0em;
border-bottom: 4px solid #47a3da;
/* general ul (div of tabs) */
.cbp-hrmenu ul
margin: 0;
padding: 0;
list-style-type: none;
/* first level ul style (div of tabs)*/
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner
width: 90%;
max-width: 70em;
margin: 0 auto; /*remove auto to push tabs to left*/
padding: 0 1.875em;
/* tabs individually + the menu that drops*/
.cbp-hrmenu > ul > li
display: inline-block;
/* link (text) of tabs */
.cbp-hrmenu > ul > li > a
font-size:1.1em;
font-weight: 700;
padding: 0.1em 1em; /* height of tabs*/
color: #999;
display: inline-block;
border-radius:0.5em 0.5em 0em 0em;
transition: all .2s ease-in-out;
/* hover tabs' text */
.cbp-hrmenu > ul > li > a:hover
/*color: #47a3da;
transition: color 0.2s linear;*/
color:#47a3da;
transform: scale(1.2);
/* links inside the drop down menu */
.cbp-hrmenu > ul > li.cbp-hropen > a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover
color: white;
background: #47a3da;
/* sub-menu (the one that drops and contains options)*/
.cbp-hrmenu .cbp-hrsub
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
.cbp-hropen .cbp-hrsub
display: block;
padding-bottom: 3em;
.cbp-hrmenu .cbp-hrsub-inner > div
width: 33%;
float: left;
padding: 0 2em 0;
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after
content: " ";
display: table;
.cbp-hrmenu .cbp-hrsub-inner:after
clear: both;
.cbp-hrmenu .cbp-hrsub-inner > div a
line-height: 2em;
transition: all .2s ease-in-out;
.cbp-hrmenu .cbp-hrsub-inner > div a:hover
font-weight:bold;
color:yellow;
.cbp-hrsub h4
color: #afdefa;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
/* Examples for media queries */
@media screen and (max-width: 52.75em)
.cbp-hrmenu
font-size: 80%;
@media screen and (max-width: 43em)
.cbp-hrmenu
font-size: 120%;
border: none;
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner
width: 100%;
padding: 0;
.cbp-hrmenu .cbp-hrsub-inner
padding: 0 2em;
font-size: 75%;
.cbp-hrmenu > ul > li
display: block;
border-bottom: 4px solid #47a3da;
.cbp-hrmenu > ul > li > a
display: block;
padding: 1em 3em;
.cbp-hrmenu .cbp-hrsub
position: relative;
.cbp-hrsub h4
padding-top: 0.6em;
@media screen and (max-width: 36em)
.cbp-hrmenu .cbp-hrsub-inner > div
width: 100%;
float: none;
padding: 0 2em;
【问题讨论】：
I am good at JS right now - 使用您的浏览器 developer 工具控制台查看错误...检查 http://ejeddi.pythonanywhere.com/process_new/static/bpmapp/js/cbpHorizontalMenu.min.js 返回的内容
【参考方案1】：
这是我可以看到的代码中的主要问题：
您正在使用静态文件，因此它们位于 url：http://yourdomain.com/static，但您正在尝试加载 http://yourdomain.com/process_new/static/
你可以通过两种方式修复它：
第一种方法是更改脚本标签中的 src 属性，并在开头添加一个“/”。它将从根目录获取 js 文件：
<script type='text/javascript' src="/static/bpmapp/js/cbpHorizontalMenu.min.js"></script>
另一种解决方法是使用 Django 静态模板标签。它将为您创建静态文件的 url：
<script type='text/javascript' src="% static 'bpmapp/js/cbpHorizontalMenu.min.js' %"></script>
别忘了在模板文件的开头加上这个标签：
% load staticfiles %
【讨论】：
你是怎么调试的？你使用浏览器检查吗？我尝试使用它进行调试，但我找不到查看错误所在的方法 我也已经问过这个问题，但答案没有用。我想移动<script type='text/javascript' src="% static 'bpmapp/js/cbpHorizontalMenu.min.js' %"></script> 以阻止 Javascript，但是当我移动它时，菜单不起作用。你知道为什么吗？
这取决于 Django 的版本：如果您使用的是 =1.10，则 load static 使用相同的 load staticfiles，因此您必须只使用其中之一。
关于调试，我使用 Chrome，我可以在“网络”选项卡中看到问题以上是关于如果 URL 不是 home/root，则 Javascript 代码不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如果数据开始加载但不是 webViewDidFinishLoad，则不会触发 NSMutableURLRequest 超时
如果我转到与现有目录相同的 wordpress url，则错误 403 被禁止
lua: 截取字符串/home/root/test/123:输出结果为123 ，怎么弄呢？