How to implement highly adaptive iframe window _ javascript tips-js tutorial

This article mainly introduces how to implement highly adaptive iframe window. If you need it, you can refer to a webpage index.html in domainA and embed a webpage other.html in domainbthrough iframe.
Because the other.html page is displayed in iframe, and the page content will be dynamically increased or decreased, you need to remove the iframe scroll bar.
Cross-origin operations cannot be performed due to restrictions of the javascript same-origin policy, which makes the problem more difficult.
Refer to the online practice and introduce a proxy page, or called the intermediary agent.html, which belongs to domainA.
Then, use iframeto nest agent.html in other.html in domainB.

Now, the situation is as follows:
Index.html uses iframe to nest other.html
Other.html use iframe to nest agent.html
The third page, agent.html, is to follow the "same-origin policy" rules to complete parameter transfer in different domains!

Our ultimate goal is to remove the scroll bar and ensure that all the embedded page content is displayed.
1.get the actual height of the other.html page
2. Set the height to the src attribute of the embedded iframe.
3.in agent.html, extract the height value from the src attribute of the iframe.

In the following example, a technique is used to avoid using setInterval () to continuously set the iframe height.
The method is to add a timestamp to the SRC of iframe, so that the browser will reload agent.html every time.
Then let the js function invokeMethodInTopWindow () in agent. hml be executed.
2 html in domainA
Index.html

The Code is as follows:

# {Extends 'main.html '/}
# {Set title: 'home '/}

Window self-adaptation-removes the restriction of the same-origin policy, and uses the same-origin policy to remove the iframe scroll bar and dynamically adjust the window height so that it can display all content on the nested page.