This article mainly introduces the highly adaptive implementation of the IFrame window, a friend in need can refer to the
DomainA has a page index.html that embeds a page in DomainB through an IFRAME other.html Because the other.html page appears in the IFRAME, and its page content will dynamically increase or decrease, now need to remove the IFRAME's scroll bar due to JavaScript homology policy restrictions, not cross-domain operation, making the problem more difficult to refer to the online approach, Introduction of a proxy page, or called an intermediary agent.html, belongs to DomainA then, in DomainB other.html, and then use the IFRAME agent.html nesting Good, now this is the case: index.html use iframe nesting other.html other.html use iframe nesting agent.html to introduce the 3rd page agent.html, is to comply with the "homology policy" rules, Complete the transfer of parameters in different domain! Our ultimate goal is to remove the scroll bar and ensure that the embedded page content is displayed 1. Get the actual height of the other.html page 2. Set height to 3 of the SRC attribute of its embedded iframe. In agent.html, the height value in the src attribute of the owning IFrame is intercepted in the following example, a technique is used to avoid using setinterval () to continuously set an IFRAME in a high way, which is on the src of the IFRAME, Append a timestamp to allow the browser to reload agent.html each time so that the JS function in Agent.hml Invokemethodintopwindow () is executed DomainA 2 HTML index.html Code as follows: #{extends ' main.html '/} #{set title: ' Home '/} <hr> <div style= ' color:red;font- Weight:bold "> Window Adaptive---to circumvent the restriction of homologous strategy, at the same time, using homologous strategy, remove the IFRAME scroll bar, dynamically adjust the height of the window, so that it can display all the content of the nested page </div> <!-- An iframe--> <div style= that requires dynamic adjustment of altitude text-aLign:center; " > <iframe name= "DomainB" src= "Http://127.0.0.1:8088/other" width= "80%" scrolling= "no" frameborder= "0" ></iframe> </div> <script type= "Text/javascript" > function resize (height) { //alert ("resize"), Document.getelementsbyname ("DomainB") [0]. Height=height; } </script> agent.html code as follows: <! DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>insert title here</title> </head> <body> I am the Agent page Oh! <script type= "Text/javascript" > window.onload = invokemethodintopwindow; function Invokemethodintopwindow () { //alert ("Call functions under the same domain, reset the height of the iframe"); &N Bsp var DomainA = Document.parentwindow; var realheight = DomainA.location.hash.split ("#") [1]; //last step: The function that invokes the topmost window, resets the height of the iframe Parent.parent.resize ( Realheight); //alert ("Realheight:" +realheight); //alert (document.parentWindow.name)//Get the name of the container's window DomainA // Error://alert (Document.parentWindow.parent.name); Access failed: Unable to access domainb //alert (document.parentWindow.parent.parent.name); The topmost window belongs to DomainA, so you can access } ///use different timestamps to set the SRC properties of the IFRAME without using the setinterval () // SetInterval ("Invokemethodintopwindow ()", 100); The other.html code in the </script> </body> </html> DOMAINB is as follows: <! DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>insert title here</title> </head> <body onclick= "proxy ()" > <!--the page embedded by a domain--> <button type= "button "Onclick=" Btnclick ()"> Toggle show </button> <div style=" Display:none "> in JavaScript, There is a very important security limitation, known as the "Same-origin Policy" (Homology policy). This strategy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology means, domain name, protocol, port same. in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). This strategy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology means, domain name, protocol, port same. in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). This strategy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology means, domain name, protocol, port same. in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). This strategy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology means, domain name, protocol, port same. &NBsp in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). This strategy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology means, domain name, protocol, port same. in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). This strategy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology means, domain name, protocol, port same. in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). This strategy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology means, domain name, protocol, port same. in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). This strategy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology means, domain name, protocol, port same. in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). &NBSP; This policy has important limitations on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document containing it. The so-called homology means, domain name, protocol, port same. </div> <div style= "Display:block" > For example a hacker program that he used IFRAME The Real Bank login page is embedded on his page, when you use the real username, password login, His page can be read through JavaScript in your form input content, so that the user name, password easily hand. such as a hacker program, he uses IFRAME to embed the real Bank login page on his page, when you use the real username, password login, His page can read the contents of the input in your form through JavaScript so that the username and password are easily available. such as a hacker program, he uses IFRAME to embed the real Bank login page on his page, when you use the real username, password login, His page can read the contents of the input in your form through JavaScript so that the username and password are easily available. such as a hacker program, he uses IFRAME to embed the real Bank login page on his page, when you use the real username, password login, His page can read the contents of the input in your form through JavaScript so that the username and password are easily available. such as a hacker program, he uses IFRAME to embed the real Bank login page on his page, when you use the real username, password login, His page can be read through JavaScript to your form inputSo that the user name, the password is easy to get. such as a hacker program, he uses IFRAME to embed the real Bank login page on his page, when you use the real username, password login, His page can read the contents of the input in your form through JavaScript so that the username and password are easily available. such as a hacker program, he uses IFRAME to embed the real Bank login page on his page, when you use the real username, password login, His page can read the contents of the input in your form through JavaScript so that the username and password are easily available. such as a hacker program, he uses IFRAME to embed the real Bank login page on his page, when you use the real username, password login, His page can read the contents of the input in your form through JavaScript so that the username and password are easily available. </div> <!--reverse Embed page a domain--> <iframe name= "DomainA" src= "" St Yle= "Display:none" ></iframe> <!--script--> <script type= "text/ JavaScript ' > //Hide or show div function Btnclick () { &NB Sp var div = document.getelementsbytagname ("div"); for (Var i in DIV) { if (i<div.length) &NBSP ; Div[i].style.display = (DIV[I].STYLE.D Isplay = ' None ')? "Block": "None"; { </script> &NBS P <script type= "Text/javascript" > function proxy () { &NB Sp Alert ("BTN click"); //Get this page's height var scrollheight = do Cument.documentElement.scrollHeight; //alert ("Scroll bar height:" +scrollheight); //Setting the height of the window to the SRC attribute of the DomainA's iframe on &NB Sp var Iframedomaina = document.getelementsbyname ("DomainA") [0];   //using a DomainA page as a proxy, the ultimate goal is to resolve the "homology strategy" limit var url = "Http://loc Alhost:9000/agent "; /** technique: Allow the browser to reload the IFRAME each time through the timestamp, so that each time it automatically sets the height of the nested iframe, avoiding the use of setinterval () * * IFRAMEDOMAINA.SRC = url+ "? Time= "+ New Date (). GetTime () +" # "+ scrollheight; } window.onload = proxy; </script> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
