iframe adaptive size implementation code

iframe adaptive size implementation code
Page domain relationship:

The main page a.html belongs to domain A: www.jb51.net
The iframed page b.html belongs to domain B: www.jb51.cn, assuming the address is: http://www.jb51.cn/b.html

Result:

The page a.html under the domain name A embeds the page b.html under the domain name B through an iframe. Since the width and height of b.html are unpredictable and will change, the iframe in a.html needs to adapt to the size.

The nature of the problem:

js has a problem with cross-domain iframe access. To control the height and width of the iframe in a.html, you must first read the size of b.html. A and B do not belong to the same domain. For security reasons, the browser restricts js's cross-domain access and cannot read the height and width of b.html.

Solution:

Introduce proxy page c.html and a.html belong to the same domain A. c.html is an intermediate proxy page provided by domain A. Assume the address of c.html is: www.jb51.net/c.html. It is responsible for reading the values ​​of width and height in location.hash, and then setting the width and height of the iframe in a.html under the same domain.

The code is as follows:

a.html code

First, a.html introduces b.html through iframe
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.jb51.cn/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>

b.html code

Copy code
The code is as follows:

<script type=”text/javascript”>
var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth);
var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //https://www.jb51.net/c.html#width|height”
}
</script>
<!--js reads the width and height of b.html, and sets the read width and height to the hash of the src of c.html, the intermediate proxy page in the same domain as a.html-->
<iframe id=”c_iframe” height=”0″ width=”0″ src=”https://www.jb51.net/c.html” style=”display:none” ></iframe>

c.html code

Copy code
The code is as follows:

<script type=”text/javascript”>
var b_iframe = parent.parent.document.getElementById("b_iframe");
var hash_url = window.location.hash;
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
</script>

The iframe in a.html can adapt to the width and height of b.html.

Other similar js cross-domain operation problems can also be solved in this way.

<<:  A brief discussion on CSS3 animation jamming solutions

>>:  1 minute Vue implements right-click menu

Recommend

Several methods of implementing carousel images in JS

Carousel The main idea is: In the large container...

Detailed analysis of the difference between Ref and Reactive in Vue3.0

Table of contents Ref and Reactive Ref Reactive T...

Summary of considerations for writing web front-end code

1. It is best to add a sentence like this before t...

Detailed explanation of the benefits of PNG in various network image formats

BMP is an image file format that is independent o...

Summary of solutions to common Linux problems

1. Connect Centos7 under VMware and set a fixed I...

15 important variables you must know about MySQL performance tuning (summary)

Preface: MYSQL should be the most popular WEB bac...

Samba server configuration under Centos7 (actual combat)

Samba Overview Samba is a free software that impl...

Detailed explanation of Jquery datagrid query

Table of contents Add code to the Tree item; 1. S...

Solution to Apache cross-domain resource access error

In many cases, large and medium-sized websites wi...

Solution to forgetting mysql password under linux

The problem is as follows: I entered the command ...

JavaScript implements mouse control of free moving window

This article shares the specific code of JavaScri...

Teach you how to build a react+antd project from scratch

The previous articles were all my own learning lo...