How to nest an HTML page in another page

This is often used in Web pages, some of the common content can be centrally placed in a page file, the other to use the content of the page only need to include (reference) this generic file. This is easy to maintain, if there are many Web pages, when the common content needs to be modified, only one file can be changed, do not need to modify each file individually.

The most typical applications such as the footer of the copyright information and other content can be placed in a called footer.html file, and then the other page file at the end of the page content contains this file can be, specific examples below.

The simplest way to nest HTML files is to use the SSI (Server Side Include) technology, which is a combination of two files on the server side. In addition to a few free web hosting services, SSI is supported by almost all web hosting servers. This is also a recommended method, which is identical to the syntax used by ASP and ASP. If the webmaster prefers PHP or JSP, the syntax will be slightly different.

For situations where server-side dynamic page languages such as SSI, ASP, ASP, PHP, and JSP cannot be used, there are two approaches to client mosaicking: JavaScript and iframe. When both of these client methods are of great disadvantage, it is generally not recommended.

The various methods are described below separately.

1. SSI (Server Side Include)

SSI is a simple dynamic web authoring technology, but some servers require a Web page file extension of. shtml to identify the SSI command in the file. So if your SSI command doesn't seem to work, do not give up and try to change the file extension to. shtml, which may be successful. If you know if your server supports SSI, see another article.

One limitation of using SSI is that the page must be placed on a Web server to see the effect, which is poorly debugged locally. Of course, if you want to debug locally, you can install an Apache server locally.

For example, you want to add the same copyright information at the bottom of each page, like

? 2009 Programmer's Lab All rights reserved

This line of information can be placed in a file called footer.html, the contents of footer.html:

<center> &copy; Programmer's lab All rights reserved </center>;

The SSI command to include footer.html for other paging files under the same path is:

<!-#include virtual= "footer.html" (Common)

Or

<!-#include file= "footer.html"

The two are almost the same, except that the include virtual takes a path in the form of a URL, and can even execute a CGI program and include its output if your server supports CGI. The include file is followed by a filesystem path, and the CGI program cannot be executed. Both can accept relative paths, so for the simple example above, the effect is the same. If you don't know the difference between the URL path and the file system path, use the Include virtual

For more information about SSI, please see this SSI's introductory article.

2. PHP

If your server supports PHP, use PHP to refer to the footer.html file as follows:

<?php include ("footer.html");?>

The file name extension for this command must be. php.

In addition to referencing the files on this server, the include command in PHP can also be used to reference HTML files on other Web sites, such as:

<?php include (http://www.prglab.com/examples/footer.html);?>

Of course you have to get permission from other websites to refer to other people's files.

3. asp and ASP.

If you are using an old-fashioned ASP, the syntax is the same as the above SSI and does not require any modification, as long as the command file extension is changed to. asp.

For ASP. NET, the difference is that because SSI commands are compiled first before the ASP command is run, the variables in the file name cannot be used with ASP. If you must use it, use the ASP. NET command to do file nesting.

Like what:

<% response.writefile ("footer.html")%>

For more information on how to implement dynamic file nesting in ASP, please refer to this article from Microsoft.

4. JSP (Java Server Page)

JSP files need to be run on a Java-based server, such as Apache Tomcat. The syntax for the JSP include file is:

<%@ include file= "footer.html"%>

5. The client contains

5. 1 The pros and cons of the client included

The client consists of two ways: JavaScript and iframe. Let's take a look at the pros and cons of both approaches.

JavaScript produces a better page format in both ways, and JavaScript can take the page fragment from one URL and then set it anywhere on another page. The result is basically the same as the server-side result, but the downside is that the client must turn on JavaScript (most of the time, most of the time, but there are a few security considerations that don't turn on). Another drawback is that search engines do not see the content of the pages contained by JavaScript, which is not good for your site promotion.

Using an IFRAME is simple, it can force an HTML page to be embedded in another page, similar to using the object control to embed a Flash movie, video, or MP3 player in a page. With an IFRAME, the user side does not need to turn on JavaScript functionality. However, the disadvantage is that the IFRAME has a fixed height and width and cannot be changed with the size of the embedded page. When the embedded page is larger than the given high width, the scroll bar is displayed (of course you can also use scrolling = "no" to force the scroll bar not to display, but so that the page content will be displayed incomplete), affecting the appearance of the page. In addition, the search engine may not include the IFRAME reference page, unfavorable website promotion.

5. 2 clients that use JavaScript include

This method is mainly applicable to the Firefox browser (any operating system), IE5 or more (Windows), Apple's Safari browser (MacOS X), you can use an item called XMLHTTP API technology to read a dynamic read an XML file through a JavaScript program. This method can also be used to read an HTML file and place it at the specified location in the current Web page file.

Professional Web Designer: Don't use this! Maybe in some cases you have to use JavaScript to embed Web pages, but this is a roundabout alternative. When your server can support the previous server-side nesting approach, especially professionals, you should avoid using this method as much as possible, as your customers may complain that the Web content you are doing is not searchable by Google, or that it does not display properly in some browsers.

Keep in mind that this method of Web pages can only be displayed in Firefox,safari, and IE5 versions of browsers. Most people use these browsers, but not everyone, and some users turn off JavaScript for security reasons.

Important: If you are debugging a webpage on your local computer instead of browsing on the server, the latest version of IE will automatically block the dynamically generated portions of JavaScript and display a warning message, and you must select the Allow dynamic content to display page to appear correctly. When you put these Web files on the server, this problem will automatically disappear, because IE will identify the home page and the content of the contained pages from the same server.

Well, enough has been said, here is how to do exactly. Put the following code on the

<script>
function clientsideinclude (ID, url) {
var req = false;

Safari, Firefox, and other non-Microsoft browsers
if (window. XMLHttpRequest) {
try {
req = new XMLHttpRequest ();
} catch (e) {
req = false;
}
} else if (window. ActiveXObject) {

//For Internet Explorer on Windows
try {
req = new ActiveXObject ("Msxml2.xmlhttp");
} catch (e) {
try {
req = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (e) {
req = false;
}
}
}
var element = document.getElementById (ID);
if (!element) {
Alert ("function clientsideinclude cannot find ID" + ID + ".) "+
" you must have a div or span tag with this ID in your Web page. ");
return;
}
if (req) {
//sync request, wait for all contents
Req.open (' GET ', url, false);
Req.send (NULL);
element.innerhtml = Req.responsetext;
} else {
element.innerhtml =
"Sorry, your browser does not support the" +
"XMLHttpRequest object. The display of this Web page requires "+
" Internet Explorer 5 or higher, "+
" or Firefox or Safari browser, or there may be other compatible browsers available. ";
}
}
</script>
With this code we can insert another page from anywhere on the page. First we want to generate an HTML control as a "container", such as <span>, and give the "container" control an ID, such as Includefooter, and then pass the ID and URL of the page to be included to the preceding JS function Clientsideinclude can do it.

One thing to be aware of is that the function Clientsideinclude only works after the page is fully loaded, so we need to call this function on the onload event of the <body> tag, which is the most safe invocation time, Because this event triggers, the browser must have fully parsed all the HTML in the page.

So, the specific code is:

Write where you want to insert another page:
<span id= "Includefooter" > </span>

In the tab at the beginning of the page, write:
<body onload= "clientsideinclude (' includefooter ', ' footer.html ');>

Of course, you can also put the function clientsideinclude in a separate file, such as named Clientsideinclude.js, and then insert the following in your page <script src= "Clientsideinclude.js" language= "JavaScript" > </script>

5. 3 clients that use an IFRAME contain

Client page nesting can also use the IFrame method, the disadvantage is that you have to think about how the nested pages in the first page to occupy a large position. If the nested page is too large to exceed the predefined width or height, the scroll bar appears on the first page. This may be exactly what you need, but it may completely ruin the design of your homepage.

The use of an IFRAME is simple, and the following example embeds another page called include.html in your page:

<iframe src= "included.html" width= "height=" >

<a href= "included.html" > your browser does not support IFRAME page nesting, please click here to access the page content. </a>

</iframe>

This page defines the pixels to be inserted with a height of 400 and a width of 450 pixels.

Why do we have to insert a normal hyperlink element in the IFRAME <a>? This is because older browsers and search engines do not support IFRAME, although it is now very rare for anyone to use Netscape 4 as an old browser, but almost everyone will use a search engine like Google. Adding hyperlinks to the IFRAME can help search engines find the content of the page.

In addition, we can define some properties of the IFRAME to control the display of the Web page, in addition to the most commonly used widths (width) and height of the definition, if in any case you do not want scroll bars, you can define the scrolling property of the iframe equals " No ". You can set the Frameborder property to 0 if you do not want a border around the mosaicked page to appear. The following example shows the use of the scrolling and Frameborder properties:

<iframe src= "included.html" width= "0" height= "no" >

<a href= "included.html" > your browser does not support IFRAME page nesting, please click here to access the page content. </a>

</iframe>

How to nest an HTML page in another page