使页眉和页脚文件包含在多个html页面中
我想创build几个html页面中包含的常见页眉和页脚页面。
我想使用JavaScript。 有没有办法做到这一点只使用HTML和JavaScript？
我想在另一个html页面中加载页眉和页脚页面。
你可以用jQuery来完成这个。
将此代码放在index.html
<html> <head> <title></title> <script src="jquery-1.10.2.js"></script> <script> $(function(){ $("#header").load("header.html"); $("#footer").load("footer.html"); }); </script> </head> <body> <div id="header"></div> <!--Remaining section--> <div id="footer"></div> </body> </html>
并将这些代码放在header.html和footer.html ，位置与index.html相同
<a href="http://www.google.com">click here for google</a>
现在，当您访问index.html ，您应该可以点击链接标签。
我使用Server Side Includes将公共部分添加为页眉和页脚。 没有HTML和没有JavaScript是必要的。 相反，web服务器在做任何事情之前自动添加包含的代码。
只需在要包含文件的位置添加以下行：
<!--#include file="include_head.html" -->
你必须使用JavaScript的HTML文件结构？ 你有没有考虑使用PHP，而不是使用简单的PHP包含对象？
如果您将.html页面的文件名转换为.php – 然后在每个.php页面的顶部，您可以使用一行代码来包含header.php中的内容
<?php include('header.php'); ?>
在每个页面的页脚中执行相同的操作，以包含footer.php文件中的内容
<?php include('footer.php'); ?>
不需要JavaScript / Jquery或其他包含的文件。
注意你也可以使用下面的.htaccess文件将你的.html文件转换成.php文件
# re-write html to php RewriteRule ^(.*)\.html$ $1.php [L] RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L] # re-write no extension to .php RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^\.]+)$ $1.php [NC,L]
尝试这个，
<html> <head> <title></title> <script src="jquery-1.10.2.js"></script> </head> <body> <div id="header"></div><br /> <div id="content"> Main Content </div><br /> <div id="footer"></div> <script> $("#header").load("header.html"); $("#footer").load("footer.html"); </script> </body> </html>
你可以在这里finddemo
我试过这个：创build一个文件header.html像
<!-- Meta --> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <!-- JS --> <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script> <script type="text/javascript" src="js/lib/angular.min.js"></script> <script type="text/javascript" src="js/lib/angular-resource.min.js"></script> <script type="text/javascript" src="js/lib/angular-route.min.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Your application</title>
现在在您的HTML页面中包含header.html ，如下所示：
<head> <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script> <script> $(function(){ $("head").load("header.html") }); </script> </head>
工作得很好。
你也可以把:( load_essentials.js 🙂
document.getElementById("myHead").innerHTML = "<span id='headerText'>Title</span>" + "<span id='headerSubtext'>Subtitle</span>"; document.getElementById("myNav").innerHTML = "<ul id='navLinks'>" + "<li><a href='index.html'>Home</a></li>" + "<li><a href='about.html'>About</a>" + "<li><a href='donate.html'>Donate</a></li>" + "</ul>"; document.getElementById("myFooter").innerHTML = "<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All" + " rights reserved.</p>" + "<p id='credits'>Layout by You</p>" + "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / " + "<a href='mailto:you@you.com'>Report a problem.</a></p>";
<!--HTML--> <header id="myHead"></header> <nav id="myNav"></nav> Content <footer id="myFooter"></footer> <script src="load_essentials.js"></script>
我一直在C＃/ Razor工作，因为我没有在家里的笔记本电脑上安装IIS，我寻找一个JavaScript解决scheme加载视图，同时为我们的项目创build静态标记。
我偶然发现了一个网站，解释“开始jQuery的方法”，它演示了一个方法，在网站上做简单的简单的JavaScript（ 引用链接在底部的post ）。 如果您打算在生产中使用此function，请务必调查所有安全漏洞和兼容性问题。 我不是，所以我从来没有看过它自己。
JS函数
var getURL = function (url, success, error) { if (!window.XMLHttpRequest) return; var request = new XMLHttpRequest(); request.onreadystatechange = function () { if (request.readyState === 4) { if (request.status !== 200) { if (error && typeof error === 'function') { error(request.responseText, request); } return; } if (success && typeof success === 'function') { success(request.responseText, request); } } }; request.open('GET', url); request.send(); };
获取内容
getURL( '/views/header.html', function (data) { var el = document.createElement(el); el.innerHTML = data; var fetch = el.querySelector('#new-header'); var embed = document.querySelector('#header'); if (!fetch || !embed) return; embed.innerHTML = fetch.innerHTML; } );
的index.html
<!-- This element will be replaced with #new-header --> <div id="header"></div>
意见/ header.html中
<!-- This element will replace #header --> <header id="new-header"></header>
源不是我自己的，我只是引用它，因为它是一个很好的香草JavaScript解决scheme的OP。 原始代码位于此处： http ： //gomakethings.com/ditching-jquery#get-html-from-another-page
也可以将脚本和链接加载到标题中。 我将添加上面的例子之一…
<!--load_essentials.js--> document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />'); document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />'); document.write('<script src="js/jquery.js" type="text/javascript"></script>'); document.getElementById("myHead").innerHTML = "<span id='headerText'>Title</span>" + "<span id='headerSubtext'>Subtitle</span>"; document.getElementById("myNav").innerHTML = "<ul id='navLinks'>" + "<li><a href='index.html'>Home</a></li>" + "<li><a href='about.html'>About</a>" + "<li><a href='donate.html'>Donate</a></li>" + "</ul>"; document.getElementById("myFooter").innerHTML = "<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All" + " rights reserved.</p>" + "<p id='credits'>Layout by You</p>" + "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / " + "<a href='mailto:you@you.com'>Report a problem.</a></p>"; <!--HTML--> <header id="myHead"></header> <nav id="myNav"></nav> Content <footer id="myFooter"></footer> <script src="load_essentials.js"></script>
另一个可用的方法，因为这个问题首先要问的是使用reactrb-express（见http://reactrb.org ）这将让你在客户端的ruby脚本，用ruby编写的反应组件代替你的HTML代码。
我认为，这个问题的答案太老了…目前一些桌面和移动浏览器支持HTML模板来做到这一点。
我已经build立了一个小例子：
在Chrome 61.0，Opera 48.0，Opera Neon 1.0，Android Browser 6.0，Chrome Mobile 61.0和Adblocker Browser 54.0中testing成功
在Safari 10.1，Firefox 56.0，Edge 38.14和IE 11中testingKO
更多的兼容性信息在canisue.com
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML Template Example</title> <link rel="stylesheet" href="styles.css"> <link rel="import" href="autoload-template.html"> </head> <body> <div class="template-container">1</div> <div class="template-container">2</div> <div class="template-container">3</div> <div class="template-container">4</div> <div class="template-container">5</div> </body> </html>
autoload-template.html
<span id="template-content"> Template Hello World! </span> <script> var me = document.currentScript.ownerDocument; var post = me.querySelector( '#template-content' ); var container = document.querySelectorAll( '.template-container' ); //alert( container.length ); for(i=0; i<container.length ; i++) { container[i].appendChild( post.cloneNode( true ) ); } </script>
styles.css
#template-content { color: red; } .template-container { background-color: yellow; color: blue; }
您可以在此HTML5 Rockspost中获得更多示例
