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

Tomcat multi-instance deployment and configuration principles

1. Turn off the firewall and transfer the softwar...

Example of using MySQL to count the number of different values ​​in a column

Preface The requirement implemented in this artic...

JS implements user registration interface function

This article example shares the specific code of ...

9 Tips for Web Page Layout

<br />Related articles: 9 practical suggesti...

Detailed tutorial on how to quickly install Zookeeper in Docker

Docker Quickly Install Zookeeper I haven't us...

How to use explain to query SQL execution plan in MySql

The explain command is the primary way to see how...

Native JS to implement the aircraft war game

This article example shares the specific code of ...

How to encapsulate the carousel component in Vue3

Purpose Encapsulate the carousel component and us...

Weather icon animation effect implemented by CSS3

Achieve results Implementation Code html <div ...

Detailed description of HTML table border control

Only show the top border <table frame=above>...

12 Useful Array Tricks in JavaScript

Table of contents Array deduplication 1. from() s...