Two usages of iFrame tags in HTML

Two usages of iFrame tags in HTML

I have been working on a project recently - Budou Collection. In short, it is to collect the pictures you like to the Budou page. Many aspects of iframe are used in this process, which can be summarized as follows:
1. As a pop-up layer to cover the bottom

If you have ever made a black mask covering the entire page, and the user happens to be using IE6, and there happens to be a select element on the page, then you will have a headache (I won’t go into the principles here). We will find that the pop-up DIV cannot cover the select, so it is our iframe's turn to appear. The logic is as follows:

Put an iframe at the same level as the pop-up div
Ensure that the z-index of the iframe is smaller than the z-index of the pop-up div
Add window resize and scroll events to ensure that the iframe can cover the entire page

Part of the code

XML/HTML CodeCopy content to clipboard
  1. var iframe = U .isie6() ? ' < iframe   style = "position:absolute;left:0;top:0;z-index:2000000;filter:Alpha(opacity=0); width:100%;height:' + ds.height + '"   frameborder = "0" > </ iframe > ' : '';
  2. $container.append(iframe).appendTo($body);

2. Writing cookies across domains

There are two domains, a.com and b.com. Under certain conditions, some of the functions of b will appear on page a. Sometimes when operating page a, you need to do some operations on the cookies of domain b.com to facilitate the user's next visit. We only need to add an iframe (dynamic or fixed) to page a, with the src attribute pointing to a proxy page of b, and perform cookie operations on this page.

<<:  How to write transparent CSS for images using filters

>>:  Detailed steps to install nginx on Apple M1 chip and deploy vue project

Recommend

Steps to use ORM to add data in MySQL

【Foreword】 If you want to use ORM to operate data...

How to configure nginx to limit the access frequency of the same IP

1. Add the following code to http{} in nginx.conf...

Several navigation directions that will be popular in the future

<br />This is not only an era of information...

Vue scaffolding learning project creation method

1. What is scaffolding? 1. Vue CLI Vue CLI is a c...

Some issues we should pay attention to when designing a web page

Web design, according to personal preferences and ...

React example showing file upload progress

Table of contents React upload file display progr...

Summary of some practical little magic in Vue practice

How can you forget lazy loading of routes that al...

Textarea tag in HTML

<textarea></textarea> is used to crea...

Right align multiple elements in the same row under div in css

Method 1: float:right In addition, floating will ...

Tutorial on installing AutoFs mount service under Linux

Whether it is Samba service or NFS service, the m...

A brief discussion on four solutions for Vue single page SEO

Table of contents 1.Nuxt server-side rendering ap...

Solution to Docker's failure to release ports

Today I encountered a very strange situation. Aft...