Partial render in HTML/JavaScript

问题

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 observe DRY concept.

HTML files should look like this:

<!--render header.html-->
<div>
    Content
</div>
<!--render footer.html-->

How can I do that?

回答1:

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:

<!--#include file="path to file/include-file.html"-->

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.

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.

Use a script tag to include the JavaScript file on your pages.
<script type="text/javascript" src="path to file/include-file.js">

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.

回答2:

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');

回答3:

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

回答4:

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?

来源：https://stackoverflow.com/questions/11598530/partial-render-in-html-javascript

标签

javascript

html

partial