HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏
生活随笔
收集整理的這篇文章主要介紹了
HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 使用HTML的link標簽import另一個HTML頁面
1.1 在HTML頁面的<head>標簽內使用<link>標簽引入另一個HTML頁面("centerHeader.html")，代碼如下。
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>首頁</title><!-- link標簽引入另一個HTML頁面 --><link rel="import" href="centerHeader.html" id="cHeader" /><script src='js/jquery.js' type='text/javascript'></script> </head>1.2 在HTML頁面的<body>標簽內引入另一個HTML頁面的內容，代碼如下。
<body><script type="text/javascript">document.write(cHeader.import.head.innerHTML);document.write(cHeader.import.body.innerHTML);</script> </body>但是：博主一開始用的就是這種方式，后來才發(fā)現只有老版的瀏覽器才支持，新版瀏覽器已經棄用了。
?
2. 通過jQuery的get方法在當前HTML頁面導入另一個HTML頁面
2.1 在HTML頁面的<body>中的<script>標簽內，編寫如下代碼即可。
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>首頁</title><script src='js/jquery.js' type='text/javascript'></script> </head> <body><script type="text/javascript">$.get('centerHeader.html',function(data){$("#header").html(data)});</script><div id="header"></div> </body>但是：這種引入方式是靜態(tài)的，無法動態(tài)更改(就是無法通過js對標簽進行相應操作)，對于頁面頭部“登錄注冊”區(qū)域需要動態(tài)展示無法滿足。
?
3. 使用<iframe>標簽
3.1 通過在<body>中編寫<iframe>標簽引入另一HTML文件，代碼如下。
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>首頁</title> </head> <body><iframe src="centerHeader.html" height="100%" width="100%" scrolling="no" frameborder="0"></iframe> </body>但是：這種方式也只適用靜態(tài)頁面，動態(tài)的話會變形，而且scrolling和frameborder這種屬性都已經被棄用了。
?
4. 將另一個HTML頁面作為js文件引入
4.1 先將HTML頁面轉換為js文件，其實也就是將html通過document對象寫入，HTML轉js網址在這里。
4.2 在相應位置引入即可，一般作為頭部頁面引入，那么放在<head>標簽中即可，如下。
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>首頁</title><script type="text/javascript" src="js/centerHeader.js"></script> </head> <body> </body>關鍵：這種方式不僅適用靜態(tài)頁面，還可以進行動態(tài)變化，目前使用中，沒有不好的地方。
?
總結
以上是生活随笔為你收集整理的HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux下的Ubuntu16.04系统
- 下一篇： chrome浏览器如何重新打开关闭的标签