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

JavaScript implements long image scrolling effect

This article shares the specific code of JavaScri...

Detailed Analysis of Event Bubbling Mechanism in JavaScript

What is bubbling? There are three stages in DOM e...

A detailed introduction to the Linux directory structure

When you first start learning Linux, you first ne...

Vue implements the magnifying glass effect of tab switching

This article example shares the specific code of ...

MySQL index pushdown details

Table of contents 1. Leftmost prefix principle 2....

Solve the error of installing VMware Tools on Ubuntu 18.04

1. According to the online tutorial, the installa...

A brief discussion on whether CSS will block page rendering

Maybe everyone knows that js execution will block...

Detailed explanation of top command output in Linux

Preface I believe everyone has used the top comma...

Ant designing vue table to achieve a complete example of scalable columns

Perfect solution to the scalable column problem o...

Detailed explanation of how to configure Nginx web server sample code

Overview Today we will mainly share how to config...

Explore how an LED can get you started with the Linux kernel

Table of contents Preface LED Trigger Start explo...

How to embed flash video format (flv, swf) files in html files

Flash file formats: .FLV and .SWF There are two ex...

Detailed explanation of Nginx passively checking the server's survival status

introduce Monitors the health of HTTP servers in ...

A record of pitfalls in JS regular matching

I recently discovered a pitfall in regular expres...

The best way to solve the 1px border on mobile devices (recommended)

When developing for mobile devices, you often enc...