I want to add one HTML file into another.
我想将一个HTML文件添加到另一个。
For example: I have header.html and footer.html Now I am trying to create aboutus.html where I want to add these two HTML files there is no dynamic code in these file except JavaScript.
例如:我有header.html和footer.html现在我正在尝试创建aboutus.html我要添加这两个HTML文件,除了JavaScript之外,这些文件中没有动态代码。
How can I do this without using any scripting language except JavaScript and CSS?
如何在不使用除JavaScript和CSS之外的任何脚本语言的情况下执行此操作?
11 个解决方案
#1
In the case of web sites with no dynamic content but have common elements, I generate the final pages on my development machine using Perl's Template Toolkit and upload the resulting static HTML files to the server. Works beautifully.
对于没有动态内容但具有共同元素的网站,我使用Perl的Template Toolkit在我的开发机器上生成最终页面,并将生成的静态HTML文件上传到服务器。工作得很漂亮。
For example:
header.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>[% title %]</title>
<link rel="stylesheet" href="/site.css" type="text/css">
<meta name="description" content="[% description %]">
<meta name="keywords" content="[% keywords.join(',') %]">
</head>
<body>
<div id="banner">
<p>Banner</p>
</div>
footer.html
<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>
aboutus.html
[%- INCLUDE header.tt.html
title = 'About Us'
description = 'What we do, how we do it etc.'
keywords = 'rock, paper, scissors'
-%]
<h1>About us</h1>
<p>We are nice people.</p>
You can now use tpage or ttree to build your pages.
您现在可以使用tpage或ttree来构建页面。
#2
Server Side Includes (SSI) exist for this particular functionality. However, you need to have the server configured for such includes. Apache supports it. Not sure about other web servers.
此特定功能存在服务器端包含(SSI)。但是,您需要为此类包含配置服务器。 Apache支持它。不确定其他Web服务器。
#3
or Server Side Includes (SSI), all embedding is done there on the server side...
或服务器端包含(SSI),所有嵌入都在服务器端完成...
#4
The only way to do this on the client side without javascript is to use frames or iframes. If you want to use javascript, you can use AJAX. Most javascript frameworks provide corresponding convenience methods (e.g. jQuery's load function).
在没有javascript的情况下在客户端执行此操作的唯一方法是使用框架或iframe。如果你想使用javascript,你可以使用AJAX。大多数javascript框架提供相应的便捷方法(例如jQuery的加载函数)。
Obviously there are many server side solutions, including the popular SSI extension for apache (see other posts).
显然有很多服务器端解决方案,包括流行的apache SSI扩展(参见其他文章)。
#5
I'm not entirely sure what it is you want but an entirely client side method of doing it would be to embed them with the <object> tag.
我不完全确定你想要什么,但完全客户端的方法是用
<html>
<head>
<title>About Us</title>
</head>
<body>
<object data="header.html"><!--Something to display if the object tag fails to work. Possibly an iFrame--></object>
<!--Content goes here...-->
<object data="footer.html"></object>
</body>
</html>
I do not think that this would work if either header.html or footer.html have javascript that accesses the parent document. Getting it to work the other way might be possible though.
如果header.html或footer.html有javascript访问父文档,我认为这不会起作用。但是,以其他方式使用它可能是可能的。
#6
Check out ppk's website (quirksmode.org), and go to the javascript archives, (http://quirksmode.org/js/contents.html). He uses an ajax function he wrote called sendRequest (found at http://quirksmode.org/quirksmode.js). Since IE9+ plays nice with standards, I've simplified it some:
查看ppk的网站(quirksmode.org),然后转到javascript档案,(http://quirksmode.org/js/contents.html)。他使用了一个名为sendRequest的ajax函数(在http://quirksmode.org/quirksmode.js上找到)。由于IE9 +在标准方面表现不错,我将其简化为:
function sendRequest(url,callback,postData) {
var req = new XMLHttpRequest();
if (!req) return;
var method = (postData) ? "POST" : "GET";
req.open(method,url,true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
if (postData)
req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.onreadystatechange = function () {
if (req.readyState != 4) return;
if (req.status != 200 && req.status != 304) {
// alert('HTTP error ' + req.status);
return;
}
callback(req);
}
if (req.readyState == 4) return;
req.send(postData);
}
Then use the sendRequest function by wrapping the setFooter, setHeader functions and any other content functions around it.
然后通过包装setFooter,setHeader函数和其周围的任何其他内容函数来使用sendRequest函数。
#7
why not use php or any other side scripting language?
为什么不使用PHP或任何其他边脚本语言?
doing this with javascript will not all users allow to watch your page.
使用javascript执行此操作并非所有用户都允许观看您的网页。
#8
Whilst this can be done with JS in a number of ways (AJAX, iframe insertion) it would be a very bad idea not to do this within the mark-up directly or (much) better on the server side.
虽然这可以通过JS以多种方式完成(AJAX,iframe插入),但是在服务器端直接或(更好)更好地执行此操作将是一个非常糟糕的主意。
A page reliant on JS for it's composition will not be fully rendered on a significant proportion of user's browsers, and equally importantly will not be correctly interpreted by google et al, if they like it at all.
一个依赖于JS的页面的组合将不会在很大一部分用户的浏览器上完全呈现,同样重要的是google等人如果他们喜欢它就不能正确解释。
You can do it, but please, please, don't.
你可以做到,但请,请,请不要。
#9
Obviously header.html and footer.html are not html files -- with full fledged headers etc. If you have just html snippets and you want to include them so you can create different pages - like aboutus.html, terms.html, you have a couple of options:
显然header.html和footer.html不是html文件 - 有完整的标题等。如果你只有html片段并且你想要包含它们以便你可以创建不同的页面 - 比如aboutus.html,terms.html,你有几个选项:
- Use a framework like Rails - which allows you to use layouts and partials. [** heavy **]
- Write a simple tool that will generate all the files by concat-ing the appropriate files.
使用像Rails这样的框架 - 它允许您使用布局和部分。 [**重**]
编写一个简单的工具,通过连接相应的文件生成所有文件。
I assume you are doing this to avoid duplicating header and footer content.
我假设您这样做是为了避免重复页眉和页脚内容。
#10
Another way would be using ajax to include the remote html files.
另一种方法是使用ajax来包含远程html文件。
#11
Framesets would be the way to do this without any script or serverside influences.
框架集是在没有任何脚本或服务器端影响的情况下执行此操作的方法。
<frameset rows="100,*,100">
<frame name="header" src="header.html" />
<frame name="content" src="content.html" />
<frame name="footer" src="footer.html" />
</frameset>
HTML5 framesets:http://www.w3schools.com/tags/html5_frameset.asp
This is a very dated solution, most web hosts will support server side includes or you could use php to include your files
这是一个非常过时的解决方案,大多数Web主机将支持服务器端包含或您可以使用PHP来包含您的文件
http://php.net/manual/en/function.include.php
Cheers
#1
In the case of web sites with no dynamic content but have common elements, I generate the final pages on my development machine using Perl's Template Toolkit and upload the resulting static HTML files to the server. Works beautifully.
对于没有动态内容但具有共同元素的网站,我使用Perl的Template Toolkit在我的开发机器上生成最终页面,并将生成的静态HTML文件上传到服务器。工作得很漂亮。
For example:
header.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>[% title %]</title>
<link rel="stylesheet" href="/site.css" type="text/css">
<meta name="description" content="[% description %]">
<meta name="keywords" content="[% keywords.join(',') %]">
</head>
<body>
<div id="banner">
<p>Banner</p>
</div>
footer.html
<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>
aboutus.html
[%- INCLUDE header.tt.html
title = 'About Us'
description = 'What we do, how we do it etc.'
keywords = 'rock, paper, scissors'
-%]
<h1>About us</h1>
<p>We are nice people.</p>
You can now use tpage or ttree to build your pages.
您现在可以使用tpage或ttree来构建页面。
#2
Server Side Includes (SSI) exist for this particular functionality. However, you need to have the server configured for such includes. Apache supports it. Not sure about other web servers.
此特定功能存在服务器端包含(SSI)。但是,您需要为此类包含配置服务器。 Apache支持它。不确定其他Web服务器。
#3
or Server Side Includes (SSI), all embedding is done there on the server side...
或服务器端包含(SSI),所有嵌入都在服务器端完成...
#4
The only way to do this on the client side without javascript is to use frames or iframes. If you want to use javascript, you can use AJAX. Most javascript frameworks provide corresponding convenience methods (e.g. jQuery's load function).
在没有javascript的情况下在客户端执行此操作的唯一方法是使用框架或iframe。如果你想使用javascript,你可以使用AJAX。大多数javascript框架提供相应的便捷方法(例如jQuery的加载函数)。
Obviously there are many server side solutions, including the popular SSI extension for apache (see other posts).
显然有很多服务器端解决方案,包括流行的apache SSI扩展(参见其他文章)。
#5
I'm not entirely sure what it is you want but an entirely client side method of doing it would be to embed them with the <object> tag.
我不完全确定你想要什么,但完全客户端的方法是用
<html>
<head>
<title>About Us</title>
</head>
<body>
<object data="header.html"><!--Something to display if the object tag fails to work. Possibly an iFrame--></object>
<!--Content goes here...-->
<object data="footer.html"></object>
</body>
</html>
I do not think that this would work if either header.html or footer.html have javascript that accesses the parent document. Getting it to work the other way might be possible though.
如果header.html或footer.html有javascript访问父文档,我认为这不会起作用。但是,以其他方式使用它可能是可能的。
#6
Check out ppk's website (quirksmode.org), and go to the javascript archives, (http://quirksmode.org/js/contents.html). He uses an ajax function he wrote called sendRequest (found at http://quirksmode.org/quirksmode.js). Since IE9+ plays nice with standards, I've simplified it some:
查看ppk的网站(quirksmode.org),然后转到javascript档案,(http://quirksmode.org/js/contents.html)。他使用了一个名为sendRequest的ajax函数(在http://quirksmode.org/quirksmode.js上找到)。由于IE9 +在标准方面表现不错,我将其简化为:
function sendRequest(url,callback,postData) {
var req = new XMLHttpRequest();
if (!req) return;
var method = (postData) ? "POST" : "GET";
req.open(method,url,true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
if (postData)
req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.onreadystatechange = function () {
if (req.readyState != 4) return;
if (req.status != 200 && req.status != 304) {
// alert('HTTP error ' + req.status);
return;
}
callback(req);
}
if (req.readyState == 4) return;
req.send(postData);
}
Then use the sendRequest function by wrapping the setFooter, setHeader functions and any other content functions around it.
然后通过包装setFooter,setHeader函数和其周围的任何其他内容函数来使用sendRequest函数。
#7
why not use php or any other side scripting language?
为什么不使用PHP或任何其他边脚本语言?
doing this with javascript will not all users allow to watch your page.
使用javascript执行此操作并非所有用户都允许观看您的网页。
#8
Whilst this can be done with JS in a number of ways (AJAX, iframe insertion) it would be a very bad idea not to do this within the mark-up directly or (much) better on the server side.
虽然这可以通过JS以多种方式完成(AJAX,iframe插入),但是在服务器端直接或(更好)更好地执行此操作将是一个非常糟糕的主意。
A page reliant on JS for it's composition will not be fully rendered on a significant proportion of user's browsers, and equally importantly will not be correctly interpreted by google et al, if they like it at all.
一个依赖于JS的页面的组合将不会在很大一部分用户的浏览器上完全呈现,同样重要的是google等人如果他们喜欢它就不能正确解释。
You can do it, but please, please, don't.
你可以做到,但请,请,请不要。
#9
Obviously header.html and footer.html are not html files -- with full fledged headers etc. If you have just html snippets and you want to include them so you can create different pages - like aboutus.html, terms.html, you have a couple of options:
显然header.html和footer.html不是html文件 - 有完整的标题等。如果你只有html片段并且你想要包含它们以便你可以创建不同的页面 - 比如aboutus.html,terms.html,你有几个选项:
- Use a framework like Rails - which allows you to use layouts and partials. [** heavy **]
- Write a simple tool that will generate all the files by concat-ing the appropriate files.
使用像Rails这样的框架 - 它允许您使用布局和部分。 [**重**]
编写一个简单的工具,通过连接相应的文件生成所有文件。
I assume you are doing this to avoid duplicating header and footer content.
我假设您这样做是为了避免重复页眉和页脚内容。
#10
Another way would be using ajax to include the remote html files.
另一种方法是使用ajax来包含远程html文件。
#11
Framesets would be the way to do this without any script or serverside influences.
框架集是在没有任何脚本或服务器端影响的情况下执行此操作的方法。
<frameset rows="100,*,100">
<frame name="header" src="header.html" />
<frame name="content" src="content.html" />
<frame name="footer" src="footer.html" />
</frameset>
HTML5 framesets:http://www.w3schools.com/tags/html5_frameset.asp
This is a very dated solution, most web hosts will support server side includes or you could use php to include your files
这是一个非常过时的解决方案,大多数Web主机将支持服务器端包含或您可以使用PHP来包含您的文件
http://php.net/manual/en/function.include.php
Cheers