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

JavaScript flow control (branching)

Table of contents 1. Process Control 2. Sequentia...

How to use async and await correctly in JS loops

Table of contents Overview (Loop Mode - Common) D...

JavaScript knowledge: Constructors are also functions

Table of contents 1. Definition and call of const...

How to check the version of Kali Linux system

1. Check the kali linux system version Command: c...

Implementation of built-in modules and custom modules in Node.js

1. Commonjs Commonjs is a custom module in nodejs...

Web Design Tutorial (5): Web Visual Design

<br />Previous article: Web Design Tutorial ...

7 interview questions about JS this, how many can you answer correctly

Preface In JavaScript, this is the function calli...

18 sets of exquisite Apple-style free icon materials to share

Apple Mug Icons and Extras HD StorageBox – add on...

Detailed introduction to CSS font, text, and list properties

1. Font properties color, specifies the color of ...

Copy fields between different tables in MySQL

Sometimes, we need to copy a whole column of data...

The easiest way to install MySQL 5.7.20 using yum in CentOS 7

The default database of CentOS7 is mariadb, but m...

CentOS7.5 installation tutorial of MySQL

1. First check whether the system has mysql insta...

How to add conditional expressions to aggregate functions in MySql

MySQL filtering timing of where conditions and ha...