Common Header / Footer with static HTML

2019-01-02 15:30发布

站内问答 / 前端开发
1551 13 4

Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?

Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.

标签： html
举报
13条回答
只靠听说
2楼-- · 2019-01-02 16:24

The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.

查看更多
0人赞 添加讨论(0) 举报
查无此人
3楼-- · 2019-01-02 16:25

You can do it with javascript, and I don't think it needs to be that fancy.

If you have a header.js file and a footer.js.

Then the contents of header.js could be something like

document.write("<div class='header'>header content</div> etc...")

Remember to escape any nested quote characters in the string you are writing. You could then call that from your static templates with

<script type="text/javascript" src="header.js"></script>

and similarly for the footer.js.

Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.

查看更多
0人赞 添加讨论(0) 举报
后来的你喜欢了谁
4楼-- · 2019-01-02 16:25

You could use a task runner such as gulp or grunt.

There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

an example of a gulp task:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });
查看更多
0人赞 添加讨论(0) 举报
宁负流年不负卿
5楼-- · 2019-01-02 16:28

The simplest way to do that is using plain HTML.

You can use one of these ways:

<embed type="text/html" src="header.html">

or:

<object name="foo" type="text/html" data="header.html"></object>
查看更多
0人赞 添加讨论(0) 举报
ら面具成の殇う
6楼-- · 2019-01-02 16:29

JQuery load() function can use for including common header and footer. Code should be like

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

You can find demo here

查看更多
0人赞 添加讨论(0) 举报
不流泪的眼
7楼-- · 2019-01-02 16:31

The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)