Detailed explanation of iframe tag usage (attributes, transparency, adaptive height)

Detailed explanation of iframe tag usage (attributes, transparency, adaptive height)

1. iframe definition and usage

 The iframe element creates an inline frame (or inline frame) that contains another document.

Differences between HTML and XHTML

 In HTML 4.1 Strict DTD and XHTML 1.0 Strict DTD, the iframe element is not supported.

Tips and Notes:

 Tip: You can put the required text between <iframe> and </iframe> to cope with browsers that don't understand iframes.

Iframe tags appear in pairs, starting with <iframe> and ending with </iframe>

The content in the iframe tag can be displayed when the browser does not support the iframe tag

property

property value describe DTD
align
  • left
  • right
  • top
  • middle
  • bottom

Deprecated. Please use styles instead.

Specifies how to align this frame with respect to surrounding elements.

 TF
frameborder
  • 1
  • 0
 Specifies whether to show a border around the frame TF
height
  • pixels
  • %
 Specifies the height of the iframe. TF
longdesc URL Specifies a page that contains a longer description of the iframe. TF
marginheight pixels Defines the top and bottom margins of the iframe. TF
marginwidth pixels Defines the left and right margins of the iframe. TF
name frame_name Specifies the name of the iframe. TF
scrolling
  • yes
  • no
  • auto
 Specifies whether scroll bars should be shown in the iframe. TF
src URL Specifies the URL of the document to be displayed in the iframe. TF
width
  • pixels
  • %
 Defines the width of the iframe. TF

Example


Copy code
The code is as follows:

<iframe src="https://www.jb51.net" width="200" height="500">
123WORDPRESS.COM uses frame technology, but your browser does not support frames. Please upgrade your browser to access 123WORDPRESS.COM normally.
</iframe>

Define iframe size in pixels

Copy code
The code is as follows:

<iframe src="http://www.baidu.com" width="20%" height="50%">
123WORDPRESS.COM uses frame technology, but your browser does not support frames. Please upgrade your browser to access 123WORDPRESS.COM normally.
</iframe>

Define iframe frame size using percentage

2. iframe transparency

In the <body> tag of the transparentBody.htm file, I have added style="background-color=transparent". Through the following four IFRAME writing methods, I think you should have a clear understanding of how to achieve the transparent background effect of iframe:


Copy code
The code is as follows:

<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME>


Iframes are only used as a last resort, because using iframes will cause more problems, and some browsers can be set to block iframes as ads.

I used iframe in a recent work. The problem I encountered at the beginning was the problem of iframe highly adaptive. I found a solution to this problem in the blog of the ued team of Koubei.com. Later, I encountered a problem of iframe transparency.

Usually the background color of the iframe is white, but it may have different colors in different browsers.

If the main page has an overall background color or background image

A white block will appear in the iframe area, which is inconsistent with the main page, so the iframe needs to be transparent.

I found a solution by searching for iframe transparency on Google

Copy code
The code is as follows:

<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe> Of course, the premise is that there is no color set in the iframe page
[code]
Note: iframe transparency mainly uses allowtransparency="true" style="background-color=transparent"
3. iframe adaptive height
</strong>Because the article is too long, you can move here to view it
<a target="_blank" href="https://www.jb51.net/article/15780.htm">https://www.jb51.net/article/15780.htm</a>
4. Output iframe ad code through js
</strong>[code]
document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.jb51.net/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');


5. Sometimes we need to consider whether the user's browser supports the iframe tag, so we need to write it as follows


Copy code
The code is as follows:

<iframe frameborder="0" name="Iframe1" src="https://www.jb51.net/" width="100%" height="200">
Your browser does not support iframes or is currently configured not to display iframes.
</iframe>

<<:  display:grid in CSS3, an introduction to grid layout

>>:  Let’s talk in detail about how browsers view closures

Blog    

Recommend

React realizes secondary linkage effect (staircase effect)

This article shares the specific code of React to...

How to solve jQuery conflict problem

In front-end development, $ is a function in jQue...

Detailed explanation of using Vue.prototype in Vue

Table of contents 1. Basic Example 2. Set the sco...

What to do if you forget your Linux/Mac MySQL password

What to do if you forget your Linux/Mac MySQL pas...

Secondary encapsulation of element el-table table (with table height adaptation)

Preface During my internship at the company, I us...

Why Google and Facebook don't use Docker

The reason for writing this article is that I wan...

How to install MySql in CentOS 8 and allow remote connections

Download and install. First check whether there i...

Solve the problem that MySQL read-write separation causes data not to be selected after insert

MySQL sets up independent writing separation. If ...

MySQL executes commands for external sql script files

Table of contents 1. Create a sql script file con...

Flex layout makes adaptive pages (syntax and examples)

Introduction to Flex Layout Flex in English means...

A brief analysis of how to access Windows 10 host folders from CentOS 8 virtual machines

After installing VMware Tools, ① text can be copi...

How to use Vue-router routing

Table of contents 1. Description 2. Installation ...

Web front-end development course What are the web front-end development tools

With the development of Internet technology, user...

A simple way to clear the CSS, JavaScript and background image cache in the browser

In the actual project development process, the pag...

Vue implements a simple calculator

This article example shares the specific code of ...