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

in domainA

Copy code The code is as follows:

#{extends 'main.html' /}
#{set title:'Home' /}

---

Window adaptive---bypassing the restrictions of the same-origin policy, while using the same-origin policy to remove the scroll bar of the iframe and dynamically adjust it The height of the window so that it can display all the content of the nested page

 

agent.html

Copy code The code is as follows:

< body>
I am an agent page!

< /body>

other.html in domainB

Copy code The code is as follows:

   
    切换显示

   

        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
        在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。
        这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
        所谓同源是指，域名，协议，端口相同。
   

   

        比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，
        他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
        比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，
        他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
        比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，
        他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
        比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，
        他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
        比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，
        他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
        比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，
        他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
        比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，
        他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
        比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，
        他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。