HTML reuse techniques

HTML reuse techniques
HTML reuse is a term that is rarely mentioned. Today, I will summarize this issue as follows:
In older versions of browsers, HTML documents do not support nesting. To reuse HTML code, there are two main approaches based on server-side and client-side implementations:
1. Server-side implementation
a. Use SSI, which is the usual shtml file.
b. Include class statements of asp, php, etc., template pages and user controls of asp.net.

2. Implement on the client side a. Use javascript client script a1. You can trigger a js method in the onload event of the html document, find a page element as a container in the method, and output a piece of html code in the container (you can define a string to store the html code snippet to be output, for example: var str="<p>hello world!</p>";).
a2. Use script registration blocks such as <script type="text/javascript" src="Default3.aspx"></script> in the page (the Default3.aspx here can also be a js script file or other server-side output that implements the js format), and use the document.write method in the implemented script file to print out the html code to be reused.
a3. Implemented using AJAX. This method has a flaw, that is, some client browsers do not support ajax cross-site calls by default.
b. Use iframe

The choice between the two:
In most cases, the server-side implementation is preferred, unless the client-side implementation is used in some static pages or in some special occasions.

More references:
http://ask-leo.com/how_do_i_include_one_html_file_inside_another.html

http://www.boutell.com/newfaq/creating/include.html

http://blog.csdn.net/omohe/archive/2007/10/28/1850766.aspx

<<:  Mini Program Custom TabBar Component Encapsulation

>>:  Basic knowledge of website design: newbies please read this

Recommend

Implementation of the Pycharm installation tutorial on Ubuntu 18.04

Method 1: Download Pycharm and install Download a...

Detailed analysis of matching rules when Nginx processes requests

When nginx receives a request, it will first matc...

Full analysis of web page elements

Relative Length Units em Description: Relative len...

Linux/Mac MySQL forgotten password command line method to change the password

All prerequisites require root permissions 1. End...

Steps to create your own YUM repository

To put it simply, the IP of the virtual machine u...

Why do code standards require SQL statements not to have too many joins?

Free points Interviewer : Have you ever used Linu...

Nginx request limit configuration method

Nginx is a powerful, high-performance web and rev...

MySQL users and permissions and examples of how to crack the root password

MySQL Users and Privileges In MySQL, there is a d...

JavaScript to achieve all or reverse selection function

This article shares the specific code of JavaScri...

Detailed explanation of virtual DOM and diff algorithm in react

The role of virtual DOM First of all, we need to ...