Home > Developer > JavaScript
DomainA has a page index.html, and uses iframeto embed a page other.html in domainb.
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
Copy codeThe Code is as follows:
# {Extends 'main.html '/}
# {Set title: 'home '/}
<Hr>
<Div style = "color: red; font-weight: bold"> window self-adaptation-removes the restriction of the same-origin policy and removes the iframe scroll bar using the same-origin policy, dynamically adjust the window height so that it can display all contents of the nested page </div>
<! -- Iframe for dynamically adjusting the height -->
<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
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Insert title here </title>
</Head>
<Body>
I am a proxy page!
<Script type = "text/javascript">
Window. onload = invokeMethodInTopWindow;
Function invokeMethodInTopWindow (){
// Alert ("Call functions in the same domain and reset the height of iframe ");
Var domainA = document. parentWindow;
Var realHeight = domainA. location. hash. split ("#") [1];
// Last step: Call the function in the upper-most window to reset the height of the iframe.
Parent. parent. resize (realHeight );
// Alert ("realHeight:" + realHeight );
// Alert (document. parentWindow. name); // obtain the domainA name of the window in which the container is located
// Error: // alert (document. parentWindow. parent. name); // Access failed: domainB cannot be accessed.
// Alert (document. parentWindow. parent. parent. name); // the top-level window belongs to domainA, so you can access
}
// After setting the src attribute of iframe with different timestamps, you do not need to use setInterval ()
// SetInterval ("invokeMethodInTopWindow ()", 100 );
</Script>
</Body>
</Html>
Other.html in domainb
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Insert title here </title>
</Head>
<Body onclick = "proxy ()">
<! -- The page embedded by Domain A -->
<Button type = "button" onclick = "btnClick ()"> display switching </button>
<Div style = "display: none">
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
In JavaScript, there is a very important security restriction, called "Same-Origin Policy" (Same-Origin Policy ).
This Policy imposes significant limitations on the page content that JavaScript code can access, that is, JavaScript can only access content in the same domain as the document containing it.
The so-called same source means that the domain name, protocol, and port are the same.
</Div>
<Div style = "display: block">
For example, a hacker program uses IFrame to embed the real logon page of a bank into his page. When you log on with a real user name and password,
The page can read the input content in your form through Javascript, so that the user name and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real logon page of a bank into his page. When you log on with a real user name and password,
The page can read the input content in your form through Javascript, so that the user name and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real logon page of a bank into his page. When you log on with a real user name and password,
The page can read the input content in your form through Javascript, so that the user name and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real logon page of a bank into his page. When you log on with a real user name and password,
The page can read the input content in your form through Javascript, so that the user name and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real logon page of a bank into his page. When you log on with a real user name and password,
The page can read the input content in your form through Javascript, so that the user name and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real logon page of a bank into his page. When you log on with a real user name and password,
The page can read the input content in your form through Javascript, so that the user name and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real logon page of a bank into his page. When you log on with a real user name and password,
The page can read the input content in your form through Javascript, so that the user name and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real logon page of a bank into his page. When you log on with a real user name and password,
The page can read the input content in your form through Javascript, so that the user name and password can be easily obtained.
</Div>
<! -- Reversely embed A page in Domain A -->
<Iframe name = "domainA" src = "" style = "display: none"> </iframe>
<! -- Script -->
<Script type = "text/javascript">
// Hide or show the div
Function btnClick (){
Var div = document. getElementsByTagName ("div ");
For (var I in div ){
If (I <div. length)
Div [I]. style. display = (div [I]. style. display = 'None ')? "Block": "none ";
}
}
</Script>
<Script type = "text/javascript">
Function proxy (){
// Alert ("btn click ");
// Obtain the height of the page
Var scrollHeight = document.doc umentElement. scrollHeight;
// Alert ("scroll bar Height:" + scrollHeight );
// Set the window height to the src attribute of the iframe of domainA.
Var iframeDomainA = document. getElementsByName ("domainA") [0];
// Use a page of domainA as the proxy. The ultimate goal is to solve the "same-origin policy" restriction.
Var url = "http: // localhost: 9000/agent ";
/** Tip: Use the timestamp to reload iframe every time the browser 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
