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

OpenSSL implements two-way authentication tutorial (with server and client code)

1. Background 1.1 Problems A recent product testi...

JavaScript implements countdown on front-end web page

Use native JavaScript to simply implement the cou...

Mysql practical exercises simple library management system

Table of contents 1. Sorting function 2. Prepare ...

HTML form_PowerNode Java Academy

1. Form 1. The role of the form HTML forms are us...

Analysis of the difference between emits and attrs in Vue3

Table of contents in conclusion Practice Analysis...

Pay attention to the use of HTML tags in web page creation

HTML has attempted to move away from presentation...

How to implement Docker to dynamically pass parameters to Springboot projects

background Recently, some friends who are new to ...

Let IE support CSS3 Media Query to achieve responsive web design

Today's screen resolutions range from as smal...

How to solve the 2002 error when installing MySQL database on Alibaba Cloud

The following error occurred while installing the...

How to use Nginx to realize the coexistence of multiple containers in the server

background There is a Tencent Linux cloud host, o...

The difference between delete, truncate, and drop and how to choose

Preface Last week, a colleague asked me: "Br...

Embed codes for several older players

The players we see on the web pages are nothing m...

Why the explain command may modify MySQL data

If someone asked you whether running EXPLAIN on a...