蛋疼死了，用jquery無法include html

Question

本帖最后由 Aliceui 于 2013-01-05 00:01:42 编辑

Answer 1

没必要非要用load，这样还有一个隐性的问题是如果有二级目录的话，这个header.html就请求不到了。其实直接以字符串的形式拼接插入或许安全一点。(function(){
    var div = document.createElement('div');
    div.id = 'header';
    $('head').after(div);    var footstr = '<div class="header_box">\
            <p>csdn计算机科技有限公司  版权所有</p>\
        </div>\
        </div>';
    $('#header').html(footstr);
            
}());

Answer 2

用 iframe 或者 服务器端 include

Answer 3

我晕，这么个功能和load有什么关系
写一个公共的js文件：
$(function(){
    var header = $('#header');
    if(header.length) {
        header.append('<div>一个公共的header</div>');
    }
});
然后每个页面都加载这个js文件就可以了

Answer 4

以上兩個方法div內容只要換成我的header就顯示不到了
<div class="header">
<div class="heading">
<div class="logo">
<a href="./">
<img src="images/logo_dark.png" border="0"></a>
</div><div class="nav">
<h4>
<ul>
      <li><a href="#">nav1</a></li>
  <li><a href="nav2">nav2</a></li>
  <li><a href="nav3">nav3</a></li>
  <li><a href="#">nav4</a></li>
</ul>   
</h4>
</div>
</div>
</div>而重點是，有沒有辦法直接用jquery設定每個html使用虛擬路徑，因為我有很多文件是在二級和三級目錄而圖片和CSS文件都是在根目錄

Answer 5

因為我內容包涵多個div，結果就....

Answer 6

模块化开发？光靠jquery不行，你可以引入requirejs，然后使用requirejs的text插件。
代码大概是require(["text!header.html"],function(headerTpl){
   $("#header").html(headerTpl);
})

Answer 7

怀疑你会用jquery么？
看到你在用 $('#header')获取标签，都以为你加了id="header"，结果你加的是class......

Answer 8

還是無法解決插入後的header在不同目錄層無法用同一個圖片目錄

Answer 9

這裡的是header的內容，class目的是獲取css至於要被插入的div是設定了id為header

Answer 10

1. 你的$("#header").load("header.html");并没有放在
$(function(){  
    //页面dom加载完成之后才做....
});
之中吧？2. 根本不存在什么二级目录三级目录四级目录的问题。
第１：所有图片的src均用绝对路径!
第２：所有jquery请求的url均用绝对路径!
第３：一定要引用相应的header的样式文件。

Answer 11

絕對路徑是不是指以引用的url原本的位置作標準?

Answer 12

為什麼我引入header後會是用了相對路徑?

Answer 13

比如你的头像的地址：http://avatar.profile.csdn.net/F/D/1/1_aliceui.jpg这就是一个绝对路径。开发时为了方便，可以省去域名: /F/D/1/1_aliceui.jpg如果所有的图片及ajax请求都这么做，　就没有任何问题了。千万别用什么相对路径，　大忌

Answer 14

代码应该是放在了DOM对象之前，或者内页加载head文件时路径不对，内页路径和根目录的路径是不一样的
<div id="header"></div>
<div class="item"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<script>
///一定要在dom下面，除非放在window.onload事件中
$("#header").load("/header.html");//使用绝对路径，而不是相对的，要不/abc/xx.html加载header.html是abc目录下的header.html了
</script>