Web Front-end
JS Tutorial
Implementation method of iframe window height adaption_javascript skills
Implementation method of iframe window height adaption_javascript skills
There is a page index.html in domainA, and a page other.html in domainB is nested through an iframe.
Since the other.html page is displayed in an iframe, and its page content will dynamically increase or decrease, now The scroll bar of the iframe needs to be removed
Due to the restrictions of the JavaScript same-origin policy, cross-domain operations cannot be performed, which makes the problem more difficult
After referring to the online practice, an agent page, or agent.html, was introduced. Belongs to domainA
Then, in other.html in domainB, use iframe to nest agent.html
Okay, now the situation is like this:
index.html uses iframe to nest other.html
other.html uses iframe to nest agent.html
The reason why we need to introduce the third page agent .html is to comply with the rules of the "same origin policy" and complete the transfer of parameters under different domains!
Our ultimate goal is to remove the scroll bar and ensure that all embedded page contents are displayed
1. Get the actual height of the other.html page
2. Set the height to its embedded
on the src attribute of the iframe 3. Intercept the height value in the src attribute of the iframe to which it belongs in agent.html
In the following example, a trick is used to avoid using setInterval() to continuously set the height of the iframe.
The method is to append a timestamp to the src of the iframe to allow the browser to reload the agent every time. .html
and then let the js function invokeMethodInTopWindow() in agent.hml be executed
2 html
index.html
#{extends 'main.html' /}
#{set title:'Home' /}
agent.html
< body>
I am an agent page!
< /body>