iT邦幫忙

0

想從首頁載入另一頁面

大家好:
有問題想請教
我發現網頁都有重複的程式碼
我希望把標頭的選項寫成一個HTML,再給其他HTML import
網路上查到的都用iframe,但我覺得好醜....
請問有沒有其他辦法,謝謝
以下head.html //希望他被所有檔案import

<html>...
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>       
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      
    </div>
  </div>
</nav>
</body>
</html>

index.html

<html>
<head>
  <link rel="import" href="head.html">  
</head>
<body>
<div class="container">           
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>      
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>       
      </tr>         
    </tbody>
  </table>
</div>
</body>
看更多先前的討論...收起先前的討論...
小魚 iT邦研究生 3 級 ‧ 2018-02-08 12:29:43 檢舉
請問您是用什麼後端的?
cool3690 iT邦新手 4 級 ‧ 2018-02-08 13:38:41 檢舉
小魚:我用JAVA
wolfwang iT邦新手 4 級 ‧ 2018-02-09 09:45:42 檢舉
是說 head 都是拿來放 meta 之類的資訊,body 才能放你用的那些 html 元素說。

通常這類的東西,都是使用樣版引擎,Java我沒涉獵,不過像 PHP 或是 Node.js 都有
ccutmis iT邦研究生 5 級 ‧ 2018-02-09 12:56:14 檢舉
https://stackoverflow.com/questions/36429672/how-do-i-append-html-from-a-document-loaded-with-ajax

2 個回答

0
暐翰
iT邦研究生 1 級 ‧ 2018-02-08 12:57:46
最佳解答

單純以HTML技術要達到你要的,可以使用Jquery ajax load
原理跟你想要的一樣

也可以使用後端技術像java include,.net layout技術
或是前端 react layout

head.html



<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>       
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

index.html

<html>
<head>
    <!--使用Jquery ajax-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!--
        把<link rel="import" href="head.html">
        改成Ajax Load方式就可以
    -->
    <!-- <link rel="import" href="head.html"> -->
    <div id="你想要插入的地方"></div>
    <script>
        $(document).ready(function () {
            $("#你想要插入的地方").load("head.html");//以ID找DOM,更改裡面的html
        });
    </script> 
</head>
<body>
<div class="container">           
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>      
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>       
      </tr>         
    </tbody>
  </table>
</div>
</body>

想更了解Jquery ajax用法可以到這裡學習
https://www.w3schools.com/jquery/ajax_load.asp

有解答到大大你的問題,麻煩設為最佳答案 :)

看更多先前的回應...收起先前的回應...
cool3690 iT邦新手 4 級 ‧ 2018-02-08 13:52:10 檢舉

阿翰
因為對ajax不熟,所以沒想過這方法
我會好好把ajax讀起來的
謝謝

暐翰 iT邦研究生 1 級 ‧ 2018-02-08 15:27:02 檢舉

我這邊看到你是用java後台

https://www.ibm.com/developerworks/cn/java/j-jsp04293/
java jsp可以用include
java spring boot 有xml layout可以設置

hahahacja iT邦新手 5 級 ‧ 2018-02-09 11:11:17 檢舉

若網頁要被YAHOO GOOGLE等搜索引擎蒐錄的話,要考慮一下.

cool3690 iT邦新手 4 級 ‧ 2018-02-09 16:01:32 檢舉

hahahacja
想請教,如果網頁這樣寫會導致不容易被搜尋到嗎?為什麼?
&
謝謝大家熱情回應,感謝

rising iT邦新手 5 級 ‧ 2018-02-09 16:16:05 檢舉

這跟爬蟲機制有關,爬蟲主要是爬你的 sourcecode 後解析內容,但你的內容藏在 ajax 回應內,或是在執行期間才動態生成的話,爬蟲沒去執行你的 js code 就不會拿到這種資訊。
目前常見解法是 server-side rendering,不過這門檻比較高就是了。

0
lemon0417
iT邦新手 4 級 ‧ 2018-02-09 10:17:29

純JSP的模板化可以參考以下連結
簡單說就是把你想抽取的部分作成tag library
https://stackoverflow.com/questions/1296235/jsp-tricks-to-make-templating-easier

如果上面的做法無法滿足你的需求,就要考慮使用其他Java的前端模板引擎

  1. Apache Tiles
  2. Thymeleaf
  3. FreeMarker
  4. ...

或是乾脆前後台分離,用前端的framework去處理XD

我要發表回答

立即登入回答