多個html頁面有相同代碼的引用前端load()方法

比如很多的登錄頁面和註冊頁面的頭部尾部以及中間的大部分都是相同的佈局和樣式,但是如果我們複製一份的話雖然能夠解決,代碼冗餘的問題又產生了。在這裏可複用的代碼起到了作用。舉例來說

這是我們的index代碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="headwrap"></div>
        <div id="main">main</div>
        <div id="footwrap"></div>
    </body>
</html>

<script src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    // load()-->選擇器.load()
    $("#headwrap").load("public.html #head",function(){
        $(":button").click(function(){
            alert()
        })
    });
    $("#footwrap").load("public.html #foot");

    
</script>

 

定義了public.html,其中的代碼如下,不需要默認的那些東西。

<div id="head">head  <input type="button" value="sou" /></div>
<div id="foot">foot</div>、

 

可以看出,原頁面是三塊佈局,想引用的話,內容區域是必須分配的,也就是還是要寫一個div把他的位置給占上,但是內容可以通過讀取public.html來回填。這是個小例子,理解用法就可以。在別的頁面也相同用法去調用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章