Partial render in HTML/JavaScript

前端未结

关注

 5  2011

I have some HTML files, and each one of them I want to partially render in another HTML file, for example header.html and footer.html in order to o

相关标签:

5条回答

灰色年华

2020-12-24 07:54
Here's a link (first one from Google I might add) that explains how to do this in various languages.

Also note that some IDEs take care of this for you. Dreamweaver being one example; in ASP.NET there are master pages; and so on.

PHP:
```
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
```
ASP:
```

```
JS:
JavaScript is another way to include HTML within the pages of your site. This has the advantage of not requiring server-level programming. But it's a little more complicated than the server-level include methods.
1. Save the HTML for the common elements of your site to a JavaScript file. Any HTML written in this file, must be printed to the screen with the document.write function.
2. Use a script tag to include the JavaScript file on your pages.
  <script type="text/javascript" src="path to file/include-file.js">
3. Use that same code on every page that you want to include the file.
PLEASE NOTE that the JS version is NOT ideal.
1. JS may be disabled or unavailable in the browser.
2. The page won't be rendered/loaded all at once.

Also, I don't think DRY really counts for this one. Consider using an IDE that will create page templates for you (like Dreamweaver for example).

If you are brave enough (and a little bit old fashioned) and you can't use any of the above, consider using an iframe for your content:
```
<html>
    <body>
      <div>my header</div>
      <iframe src="mycontent.html" />
      <div>my fooder</div>
    </body>
</html>
```
DISCLAIMER
I would rather cut off my own hands than implement the iframe or JS approach. Give deep consideration towards whether you actually NEED to do this.
0 讨论(0)
发布评论:

提交评论
- 加载中...
迷失自我

2020-12-24 07:55

If you are looking for a client side only solution that is html/js only you should have a look at AngularJS and its ngInclude syntax.

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

0 讨论(0)
发布评论:

提交评论
- 加载中...
梦毁少年i

2020-12-24 07:56

If you are using server-side programming, you can use server-side include else if your host file is an HTML file then you can use html SCRIPT tag to include the header.html and footer.html files. Though, am not sure as to what do you really mean by partially rendering HTML file?

0 讨论(0)
发布评论:

提交评论
- 加载中...
Happy的楠姐

2020-12-24 08:06
If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.

Have a look at the jQuery 'load()' function here:

http://api.jquery.com/load/

Assuming your have the following html:
```
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
```
your usage would look something like this:
```
$('#header').load('header.html');
$('#footer').load('footer.html');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
温柔的废话

2020-12-24 08:06

As others said, it looks like it can't be done with HTML alone. Another way it could be done on the server-side, if you are using Java, is with Thymeleaf.

For example, adding a main menu on every page with <div th:replace="fragments/mainmenu.html"></div> . Then mainmenu.html could just contain a bunch of divs. The fragment doesn't need to be a full HTML page.

0 讨论(0)
发布评论:

提交评论
- 加载中...