Summary of methods to include file contents in HTML files

Summary of methods to include file contents in HTML files

In the forum, netizens often ask, can I read the contents of another html file in an html file? The answer is yes, and there is more than one way. In the past, I only used iframe to reference, and later I found several other methods. Today I will summarize these methods for your reference. I think the third method is better!

Several ways to introduce other HTML files in HTML files

1.IFrame introduction, look at the following code


Copy code
The code is as follows:

<IFRAME NAME="content_frame" width=100% height=40 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>

You will see an externally imported file, but you will find something like an outer frame surrounding it. You can use


Copy code
The code is as follows:

<iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=40 src="import.htm" frameborder=0></iframe>

But you will find that there is still a problem, that is, the background color is different. You can just use the same background color in the imported file import.htm, but if you use

If you are using IE5.5, you can read this article about transparent colors. If you want to import a long file without scroll bars, add this to the body of import.htm:

Enter scroll=no

*Disadvantages: Unable to do navigation jump, jump inside iframe, content overlap appears

2.<object> method


Copy code
The code is as follows:

<object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

object tag — defines an embedded object (e.g. image, media, code, etc.)

* It does not conform to the concept of standard web design and has been abandoned by standard web design.

3.Behavior download method


Copy code
The code is as follows:

<span id=showImport></span>
<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" />
<script>
function onDownloadDone(downDate){
showImport.innerHTML=downDate
}
oDownload.startDownload('import.htm',onDownloadDone)
</script>

<<:  How to implement rounded corners with CSS3 using JS

>>:  Pure CSS code to achieve flow and dynamic line effects

Recommend

XHTML Getting Started Tutorial: Simple Web Page Creation

Create your first web page in one minute: Let'...

How to handle super large form examples with Vue+ElementUI

Recently, due to business adjustments in the comp...

Detailed explanation of the steps to create a web server with node.js

Preface It is very simple to create a server in n...

Implementation of CSS border length control function

In the past, when I needed the border length to b...

Native JS realizes compound motion of various motions

This article shares with you a compound motion im...

Steps and pitfalls of upgrading linux mysql5.5 to mysql5.7

Table of contents Linux MySQL 5.5 upgraded to MyS...

Detailed explanation of MySQL information_schema database

1. Overview The information_schema database is th...

Details of MutationObServer monitoring DOM elements in JavaScript

1. Basic Use It can be instantiated through the M...

Three ways to implement waterfall flow layout

Preface When I was browsing Xianyu today, I notic...

How to hide elements on the Web and their advantages and disadvantages

Example source code: https://codepen.io/shadeed/p...

Vue3 draggable left and right panel split component implementation

Table of contents Breaking down components Left P...

Embedded transplant docker error problem (summary)

After a long period of transplantation and inform...