Shulou(Shulou.com)06/01 Report--

This article focuses on "how to solve the problem of location.hash cross-domain iframe adaptation", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to solve the problem of location.hash cross-domain iframe adaptation.

Page region relationship:

The domain A:www.taobao.com to which the main page a.html belongs

The domain B:www.alimama.com to which the page b.html of the iframe belongs, assuming the address: https://www.yisu.com/

Achieve results:

The page a.html under A domain name is embedded into the page b.html under B domain name through iframe. Because the width and height of b.html are unpredictable and changeable, the adaptive size of iframe in a.html is required.

The nature of the problem:

Js access to cross-domain iframe, because in order to control the height and width of iframe in a.html, we must first read the size of b.html. An and B do not belong to the same domain. For security reasons, browsers restrict js cross-domain access and cannot read the height and width of b.html.

Solution:

The introduction of the proxy page c.html belongs to the same domain as the a.html domain A _. It is assumed that the address of c.html is www.taobao.com/c.html, which is responsible for reading the values of width and height in location.hash, and then setting the width and height of iframe in a.html in the same domain.

The code is as follows:

A.html code

First of all, b.html is introduced into a.html through iframe.

B.html code

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"); / / liehuo.netc_iframe.src = cantilever frame.src+ "#" + breadwidth+ "|" + breadth; / / https://www.yisu.com/#width|height"}

C.html code

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

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

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

At this point, I believe you have a deeper understanding of "how to solve the problem of cross-domain iframe adaptation in location.hash". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.