This article mainly introduces the implementation of an IFRAME window highly adaptive Another ingenious idea, the need for friends can refer to the following
DomainA has a page index.html that embeds a page in DomainB through an IFRAME other.html Because the other.html page is displayed in the IFRAME and its page content dynamically increases or decreases, it is now necessary to remove the IFRAME's scroll bar due to JavaScript-homologous policy constraints, it is not possible to cross domain operations, making the problem more difficult Refer to the online approach, introduced a proxy page, or called the intermediary agent.html, belong to domaina then, in DomainB other.html, and then use the IFRAME agent.html nested Well, 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 in order to comply with the "homologous policy" rules, the completion of different domain parameters of the transfer! Our ultimate goal is to remove the scroll bar and ensure that the embedded page content is all displayed 1. Get the actual height of the other.html page height 2. Set the height to the SRC attribute of its embedded IFRAME 3. The height value in the src attribute of the owning IFrame is intercepted in agent.html The following example uses a technique Avoid the use of setinterval () constantly to set the height of the iframe practice is on the iframe src, attach a timestamp, so that the browser reload each time agent.html Then let the JS function in Agent.hml Invokemethodintopwindow () be executed DomainA 2 html index.html code is as follows: #{extends ' main.html '/} #{set title: ' Home '/} <hr> <div style= ' color:red;font-weight: Bold "> Window Adaptive---The limitation of bypassing the homologous policy, at the same time using homologous strategy, remove the IFRAME scroll bar, dynamically adjust the height of the window, so that it can display the content of the nested page </div> <!--the need to dynamically adjust the height of the iframe--> <div Style= "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 is 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"); var DomainA = document.parentwindow; var realheight = DomainA.location.hash.split ("#") [1]; //last Step: A function that invokes the topmost window, resetting the height of the iframe parent.parent.resize (realheight); //alert (" Realheight: "+realheight); //alert (document.parentWindow.name);//Get the name of the window that contains the container domaina //error://alert ( Document.parentWindow.parent.name); Access failed: domainb //alert (document.parentWindow.parent.parent.name) cannot be accessed;//top window belongs to DomainA so you can access } //using different timestamps to set the SRC properties of the IFRAME, you do not need to use SetInterval () //setinterval ("Invokemethodintopwindow ()"); The other.html copy code 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 ()" > <!--pages embedded by a domain--> <button type= "button" onclick= "Btnclick ()" > Toggle display </button> <div style= "Display:none "> in JavaScript, there is a very important security restriction, 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 is refers to, 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 is refers to, 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 is refers to, 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 is refers to, 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 is refers to, 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 is refers to, domain name, protocol, port same. in JavaScript, there is a very important security limitation, known as "Same-origin Policy" (Homology policy). This strategy for JavaScript code canThe page content that you access makes a very important restriction, that is, JavaScript can only access content that is under the same domain as the document that contains it. The so-called homology is refers to, 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 is refers to, 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 is refers to, domain name, protocol, port same. </div> <div style= "Display:block" > 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 in the 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 user name, password login, His page can be read through JavaScript to your form input content, so 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 user name, password login, His page can be read through JavaScript to your form input content, so 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 user name, password login, His page can be read through JavaScript to your form input content, so 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 log in when, hisThe page can read the contents of 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 user name, password login, His page can be read through JavaScript to your form input content, so 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 user name, password login, His page can be read through JavaScript to your form input content, so 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 user name, password login, His page can be read through JavaScript to your form input content, so that the user name, The password is easy to get. </div> <!--reverse Embed page a domain--> <iframe name= "DomainA" src= "style=" "Display:none" ></iframe> <!--script--> <script type= "Text/javascript" > //Hide or show div function Btnclick () { var div = document.getelementsbytagname ("div"); for (var i in Div) { if (i< ;d iv.length) Div[i].style.display = (Div[i].style.display = = ' None ')? "Block": "None"; } } </script> <script type= "Text/javascript" > function proxy () { //alert ("btn click"); &nbsP Gets the height of this page var scrollheight = document.documentelement.scrollheight; //alert ("Scroll bar height:" +scrollheight); //The height of the window is first set to the SRC attribute of the IFRAME belonging to DomainA var Iframedomaina = document.getelementsbyname ("DomainA") [0]; //using a DomainA page as a proxy, the ultimate goal is to resolve the "homology policy" constraint var url = "Http://localhost:9000/agent"; /** Tip: The timestamp allows the browser to reload the IFRAME each time, so that each time automatically set the height of the nested iframe, avoiding the use of setinterval () */ iframedomaina.src = url+ "? Time= "+ New Date (). GetTime () +" # "+ scrollheight; } window.onload = proxy; </script& gt; </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
