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

CSS setting div background image implementation code

Adding background image control to a component re...

Summary of various methods for Vue to achieve dynamic styles

Table of contents 1. Ternary operator judgment 2....

Summary of some thoughts on binlog optimization in MYSQL

question Question 1: How to solve the performance...

Mini Program to Implement Calculator Function

This article example shares the specific code of ...

Introduction to new features of MySQL 8.0.11

MySQL 8.0 for Windows v8.0.11 official free versi...

Ubuntu 20.04 Chinese input method installation steps

This article installs Google Input Method. In fac...

Detailed explanation of the mysql database LIKE operator in python

The LIKE operator is used in the WHERE clause to ...

Solution to the bug that IE6 select cannot be covered by div

Use div to create a mask or simulate a pop-up wind...

JavaScript canvas realizes the effect of nine-square grid cutting

This article shares the specific code of canvas t...

Implementation of mounting NFS shared directory in Docker container

Previously, https://www.jb51.net/article/205922.h...

SQL implements LeetCode (180. Continuous numbers)

[LeetCode] 180. Consecutive Numbers Write a SQL q...

W3C Tutorial (9): W3C XPath Activities

XPath is a language for selecting parts of XML do...

CSS code for arranging photos in Moments

First, you can open Moments and observe several l...

How to View All Running Processes in Linux

You can use the ps command. It can display releva...