想從首頁載入另一頁面

html

神威 2018-02-08 11:36:29 ‧ 8104 瀏覽

分享至

大家好:
有問題想請教
我發現網頁都有重複的程式碼
我希望把標頭的選項寫成一個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邦大師 1 級 ‧ 2018-02-08 12:29:43 檢舉

請問您是用什麼後端的?

神威 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邦高手 2 級 ‧ 2018-02-09 12:56:14 檢舉

https://stackoverflow.com/questions/36429672/how-do-i-append-html-from-a-document-loaded-with-ajax

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

暐翰

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

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