【问题标题】:my javascript in external html is not loading我在外部 html 中的 javascript 没有加载
【发布时间】:2010-01-20 14:15:00
【问题描述】:

好的,这是我的代码

/* index.html */

<!-- jQuery Scripts -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>  
    <script type="text/javascript" src="http://tdr.host22.com/scripts/li.js"></script>
    <link href="http://tdr.host22.com/scripts/tdr.css" rel="stylesheet" type="text/css">
    <!-- Div Layout -->
    <div id="container">
     <div id="dp">my DP here</div>
     <div id="hrefs">
      <ul id="menu">
        <li><a id="home">Home</a></li>
        <li><a id="about">About Me</a></li>
        <li><a id="shop">My Shop / Wishlist</a></li>
        <li><a id="friend">My Friends</a></li>
        <li><a id="vids">Wicked Videos</a></li>
        <li><a id="music">Music Playlist</a></li>
        <li><a id="pics">My Pictures</a></li>
        <li><a id="ranks">My Rankings</a></li>
        <li><a id="stuff">Random Stuff</a></li>
        <li><a id="read">Read Messages</a></li>
        <li><a id="leave">Leave a Message</a></li>
      </ul>
     </div>
     <div id="content">
     TDR Content
      <div id="loading">  
       <img src="images/loading.gif" alt="Loading..." />  
      </div>
     </div>
    </div>

/* li.js */

$(document).ready(function(){
 //References
 var sections = $("#menu a");
 var loading = $("#loading");
 var content = $("#content");

 //Manage click events
 sections.click(function(){
  //show the loading bar
  showLoading();
  //load selected section
  switch(this.id){
   case "home":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #home_section", hideLoading);
    content.slideDown();
    break;
   case "about":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #aboutme_panel", hideLoading);
    content.slideDown();
    break;
   case "shop":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #shop_section", hideLoading);
    content.slideDown();
    break;
   case "friend":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #friend_section", hideLoading);
    content.slideDown();
    break;
   case "vids":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #vids_section", hideLoading);
    content.slideDown();
    break;
   case "music":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #music_section", hideLoading);
    content.slideDown();
    break;
   case "pics":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #pics_section", hideLoading);
    content.slideDown();
    break;
   case "ranks":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #ranks_section", hideLoading);
    content.slideDown();
    break;
   case "stuff":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #stuff_section", hideLoading);
    content.slideDown();
    break;
   case "read":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #read_section", hideLoading);
    content.slideDown();
    break;
   case "leave":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #leave_section", hideLoading);
    content.slideDown();
    break;
   default:
    //hide loading bar if there is no selected section
    hideLoading();
    break;
  }
 });

 //show loading bar
 function showLoading(){
  loading
   .css({visibility:"visible"})
   .css({opacity:"1"})
   .css({display:"block"})
  ;
 }
 //hide loading bar
 function hideLoading(){
  loading.fadeTo(1000, 0);
 };
});

/* section.html */

<div id="home_section">
Home haha
</div>
<!-- About Us -->
<div id="about_section">  
<script type='text/javascript'><!--
imvu_avatar_name = "TheDarkRaver";
imvu_panel_name = "aboutme_panel";
imvu_section_name = "mp_left";
imvu_panel_width = 590;
imvu_panel_height = 459;
//--></script>
</div>

/* tdr.css */

@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border: 0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0pt;
padding: 0pt;
vertical-align: baseline;
}
/*Removing Bullets*/
#menu {
  padding:0;
  margin:0;
  width:0;
}
#menu li { 
list-style-type:none; 
display: inline;
} 
/*Menu Link Style */
#menu a, #menu a:visited {
  position:relative; /* ADDED */
  display:block;
  width:9em;
  cursor: crosshair;
  border:1px solid orange;
  font-family:cursive, sans-serif;
  font-size:0.7em;
  text-align:center;
  text-decoration:none;
  background:transparent;
  color:orange;
  padding:0.25em;
}
#menu a:hover {
 color:red;
 border:1px solid red;
}
#container {
 position:relative;
 width: 700px;
 height:400px;
 background-color: transparent;
 border: 1px;
 border-color:orange;
 border-style: dotted;
 margin: 0pt auto;
}
#hrefs {
 width:0px;
}
#content {
 position: absolute;
 top:0px;
 left:9.8em;
 width:580px;
 height:100%;
 border:1px solid #0066CC;
 background-color:transparent;
 background-image:  url("../images/cont.png");
 background-repeat: repeat;
 overflow: auto;
 color: #000000;
 line-height: 1.3em;
 font-size: 12px;
}
#dp {
 position:absolute;
 bottom:0px;
 left:0px;
}
#loading{  
     text-align: center;  
     visibility: hidden;  
}  
.clear{
 clear: both;
 height: 0;
 visibility: hidden;
 display: block;
}

【问题讨论】:

  • 我已经添加了它只是由于某种原因没有发布我是这个网站的新手到目前为止我不喜欢显示代码脚本在所见即所得中的工作方式我修复了错误在我进行故障排除时,它又回到了“损坏的完成状态”
  • 好的,现在代码再次正确,但如果您查看tdr.host22.com 并单击关于我,您会注意到它会将整个站点加载到 div 中,而不是在 section.html 中加载 div #about_section ...
  • 好的解决了这个问题,但现在它正在做原来的问题,加载 Div 但空白没有 javascript。
  • 所以没人知道 :( 太烂了

标签: javascript jquery html xhtml external


【解决方案1】:

就像尼克说的,你可能不包括 jQuery,Firebug 中是否有任何错误或类似的东西?

此外,您可能需要考虑将大部分巨大的 switch 替换为类似以下内容:

content.slideUp();
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
content.slideDown();

编辑: 为了更清楚地了解最后一部分,首先进入您的标记并进行更改:

<li><a id="about">About Me</a></li>

进入

<li><a id="aboutme">About Me</a></li>

这是因为在您的 javascript 中,您正在显示一个名为“aboutme”的部分...最好保持名称匹配...然后删除整个 switch 并将其替换为:

content.slideUp();
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
content.slideDown();

所以你的代码的整个 javascript 部分变成了(有一些其他的改进):

$(document).ready( function() {
  var sections = $("#menu a");
  var loading = $("#loading");
  var content = $("#content");

  function showLoading() {
    loading.css( {
      visibility: 'visible',
      opacity: 1,
      display: 'block'
    } );
  }

  function hideLoading(){
    loading.fadeTo(1000, 0);
  }

  sections.click( function() {
    showLoading();
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
    content.slideDown();
  } );
} );

如您所见,这段代码甚至不需要 cmets,因为它非常简短。

另外,通读这篇文章,似乎你几乎肯定还有其他问题......动画不会像你期望的那样发生,slideUp 是异步的,这意味着它会开始向上滑动然后立即加载,你可能不会'不希望出现这种行为,因此请查看 jQuery 链接动画的方法(例如,通过回调,参见 slideUp 的文档),或查看 jQuery 1.4 的 delay 方法。

【讨论】:

  • 我是 JS 新手,所以我不知道该怎么做
  • 谢谢 duks,我会阅读回调函数,当我点击链接时,你有什么建议可以在 dom 中加载 javascript 标签而不是执行它们
【解决方案2】:

我没有看到您在任何地方加载 jQuery...您必须在代码之前的某个时间点包含库本身,如下所示:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>    
<script type="text/javascript" src="http://tdr.host22.com/scripts/li.js"></script>

【讨论】:

  • 他正在尝试加载 jQuery,但来自谷歌代码 (jqueryjs.googlecode.com/files/jquery-1.2.6.min.js)。所以它试图下载它而不是提供脚本。
  • @fudgey: 他现在是 :) 当被问到/回答时没有 jQuery 脚本参考 :)
  • 我修复了所有代码,但据我所知仍然无法正常工作。
【解决方案3】:

您是否尝试在浏览器中打开http://tdr.host22.com/scripts/li.js?您应该可以直接下载该文件。

也许您不小心在您的脚本文件夹上启用了某些用户身份验证?

我还建议使用不带域名的路径,即 /scripts/li.js,这样当网站移动到另一个域时,您不必更改它。

【讨论】:

    【解决方案4】:

    sections.html 中的 JavaScript 位于 &lt;div id="about_section"&gt;

    content.load("http://tdr.host22.com/sections.html #home_section", hideLoading); 只会从 sections.html

    加载 &lt;div id="home_section"&gt;

    要从 sections.html 加载 JavaScript,试试这个

    content.load("http://tdr.host22.com/sections.html #about_section", hideLoading);
    

    【讨论】:

    • content.load("#aboutme_panel", hideLoading);不会加载任何东西。是直接从 imvu 主页调用隐藏的 div 面板的测试
    猜你喜欢
    • 1970-01-01
    • 2012-06-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多