IFRAME window height adaptive implementation method

Author：Eve Cole Update Time：2025-02-22 14:16:01

There is a page in Domaina Index.html, nested with an other.html in a page in Domainb through iframe

Because the Other.html page is displayed in iframe, and the content of the page will increase or decrease dynamically, now the IFRAME rolling bar needs to be removed

Due to the limitations of JavaScript homologous strategies, cross -domain operations cannot be performed, which makes the problem more difficult

Refer to the Internet approach, introduce an agency page, or the agent.html, which belongs to Domaina

Then, in the Other.html in domainb, then use iFrame to nested agent.html for nested

Okay, this is the case now:

Index.html uses iframe nested Other.html

Other.html uses iframe nesting agent.html

The reason for introducing the 3rd page Agent.html is to comply with the rules of "homogeneous strategy" and complete the transfer of parameters under different Domain!

Our ultimate purpose is to remove the rolling bar, and to ensure that all the contents of the embedded page are displayed

1. The actual height of the actual altitude of Other.html page

2. Set Height on the SRC property of the IFRAME in its embedded

3. Interture the Height value in the SRC attribute of the IFRame in agent.html

In the following example, a technique is used to avoid using SetInterval () to constantly set the height of iframe

The method is to add a timestamp on the SRC of iframe, allowing the browser to reload the agent.html every time

Then let the js function in Agent.hml InvokeMethodintopwindow () be executed

2 HTML in Domaina

index.html

Copy code code as follows:

#{Extends 'Main.html' /}

#{Set Title: 'HOME' /}

<hr>

<div style="color:red;font-weight:bold">窗口自适应---绕开同源策略的限制，同时又利用同源策略，去掉iframe的滚动条，动态调整窗口的高度，让It can display all the contents of the nested page </div>

<!-You need to dynamically adjust the height of iframe->

</div>

Function Resize (Height) {

// Alert ("Resize");

document.Getelementsbyname ("domainb") [0] .height = height;

}

</script>

agent.html

Copy code code as follows:

<! Doctype html>

<html>

<head>

<Title> Insert Title Here </Title>

</head>

<body>

I am a proxy page!

Window.onload = InvokeMethodintopwindow;

function invokemethodintopwindow () {) {

// Alert ("Call the function in the same domain, reset the height of iframe");

var domain = document.parentwindow;

var realheight = domaina.location.hash.split ("#") [1];

// Last Step: Call the function of the upper layer window and reset the height of iframe

Parent.parent.Resize (Realheight);

// Alert ("Realheight:"+Realheight);

//alert (document.parentwindow.name) ;// Get the name of the window where the container is located Domaina

//error://alert (document.parentwindow.parent.name); //

//alert (document.parentwindow.parent.parent.name) ;// The top layer of Window belongs to Domaina, so you can visit it

}

// After setting the SRC attribute of iframe with different timestamps, do not need to use SetInterval ()

// SetInterval ("InvokeMethodintopwindow ()", 100);

</script>

</body>

</html>

Other.html in domainb

Copy code code as follows:

<! Doctype html>

<html>

<head>

<Title> Insert Title Here </Title>

</head>

<!-Page embedded in A domain->

<button type = "Button" Onclick = "BtnClick ()"> Switch display </Button>

In JavaScript, there is a very important security limit, called "Same-Origin Policy".

This strategy has made important restrictions on the content of the page that the JavaScript code can access, that is, JavaScript can only access the content of the document containing its documents in the same domain.