Pra*_*A R 122 html javascript css jquery
我想创建包含在几个html页面上的常见页眉和页脚页面.
我想用javascript.有没有办法只使用HTML和JavaScript？
我想在另一个html页面中加载页眉和页脚页面.
Har*_*anx 170
你可以用jquery完成这个.
将此代码放入 index.html
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</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,您应该可以单击链接标记.
The*_*acy 31
我使用Server Side Includes添加公共部分作为页眉和页脚.不需要HTML和JavaScript.相反,Web服务器会在执行任何其他操作之前自动添加包含的代码.
只需在要包含文件的位置添加以下行:
<!--#include file="include_head.html" -->
Sol*_*Sol 26
你必须使用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]
Dim*_*Vai 13
该问题询问仅使用 HTML 和 JavaScript。问题是使用 JavaScript 甚至 jQuery （请求额外的header.html“稍后”）向服务器发出的第二个请求是：
慢的！
因此，这在生产环境中是不可接受的。一种方法是仅包含一个文件并仅使用此 .js 文件.js来提供 HTML 模板。因此，第 1 步，在 HTML 中您可以：
<header id="app-header"></header>
<script async src="header.js"></script>
然后，第 2 步，将模板放入header.js. 对此 HTML 字符串使用反引号：
let appHeader = `
<nav>
/*navigation or other html content here*/
</nav>
`;
document.getElementById("app-header").innerHTML = appHeader;
这还有一个好处，您可以根据需要动态更改模板的内容，因为它是 JavaScript！另外，尝试defer（甚至不尝试）安装异步，但对用户来说可能看起来更慢 - 这取决于您的其他内容，所以只需尝试即可。只是，别忘了把 放在script后面header。
关于速度的说明
在 HTTP/2 世界中，Web 服务器“理解”哪些附加文件（.css、.js 等）应与特定的 一起发送.html，并在初始响应中将它们一起发送。但是，如果在您的“原始”文件中.html没有header.html导入此文件（因为您打算稍后使用脚本调用它），则最初不会发送该文件。因此，当您的 JavaScript/jQuery 请求它时（这将在很久以后发生，当 HTML 和 JavaScript 被“解释”时），您的浏览器将向服务器发送第二个请求，等待答案，然后执行其操作。 ..这就是为什么这很慢的原因。您可以使用任何浏览器的开发人员工具来验证这一点，并header.html稍后观看即将发生的事情。
因此，作为一般建议（当然有很多例外），如果您关心速度，请将所有附加文件导入原始.html（或）文件中。如果需要，php请使用defer或。稍后不要使用 JavaScript 导入任何文件。async
小智 9
我试过这个:创建一个文件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>
工作得很好.
小智 7
你也可以把:(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>我认为,这个问题的答案太旧了......目前一些桌面和移动浏览器都支持HTML模板.
我建立了一个小例子:
在Chrome 61.0,Opera 48.0,Opera Neon 1.0,Android Browser 6.0,Chrome Mobile 61.0和Adblocker Browser 54.0中测试OK在Safari 10.1,Firefox 56.0,Edge 38.14和IE 11中
测试了KO
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 Rocks帖子中获得更多示例
我一直在C#/ Razor工作,因为我在家用笔记本电脑上没有IIS设置,所以我在为项目创建静态标记的过程中寻找加载视图的JavaScript解决方案.
我偶然发现了一个网站,解释了"放弃jquery"的方法,它演示了一个网站上的方法,正是你在普通的简javascript(帖子底部的参考链接)中所做的.如果您打算在生产中使用它,请务必调查任何安全漏洞和兼容性问题.我不是,所以我自己从未调查过.
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>
源代码不是我自己的,我只是引用它,因为它是OP的一个很好的vanilla javascript解决方案.原始代码存在于此处:http://gomakethings.com/ditching-jquery#get-html-from-another-page
| 归档时间： |
|
| 查看次数： |
336337 次 |
| 最近记录： |