There is a page index.html in domainA, which nests a page other.html in domainB through an iframe
Since the other.html page is displayed in the iframe and its page content will increase or decrease dynamically, the scrollbar of the iframe needs to be removed now
Due to the limitations of javascript same-origin policy, cross-domain operation cannot be performed, making the problem more difficult
I have referred to the online practice and introduced an agent page, or an agent.html, which belongs to domainA
Then, in other.html in domainB, use iframe to nest agent.html
OK, now the situation is:
index.html nesting other.html using iframe
other.htmlNest agent.html using iframe
The reason why the third page agent.html is to abide by the rules of "same-origin policy" and complete the passing of parameters under different domains!
Our ultimate goal is to remove the scrollbar and ensure that all the embedded page content is displayed
1. Get the actual height of the other.html page
2. Set height to the src property of the iframe it embedded
3. In agent.html, cut out the height value in the src attribute of the iframe.
In the following example, a trick is used to avoid using setInterval() to continuously set the height of the iframe.
The method is to attach a timestamp to the iframe's src, so that the browser reloads the agent.html every time
Then let the js function invokeMethodInTopWindow() in agent.hml be executed
2 html in domainA
index.html
The code copy is as follows:
#{extends 'main.html' /}
#{set title:'Home' /}
<hr>
<div style="color:red;font-weight:bold">Window adaptation--bypass the limitations of homologous policies, and at the same time use homologous policies to remove the scrollbar of the iframe, dynamically adjust the height of the window, so that the It can display all contents of the nested page</div>
<!-- iframe that requires dynamic height adjustment -->
<div style="text-align:center;">
<iframe name="domainB" src="http://127.0.0.1:8088/other" scrolling="no" frameborder="0"></iframe>
</div>
<script type="text/javascript">
function resize(height) {
//alert("resize");
document.getElementsByName("domainB")[0].height=height;
}
</script>
agent.html
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
I'm the proxy page!
<script type="text/javascript">
window.onload = invokeMethodInTopWindow;
function invokeMethodInTopWindow() {
//alert("Call the function under the same domain and reset the height of the iframe");
var domainA = document.parentWindow;
var realHeight = domainA.location.hash.split("#")[1];
//last step: Call the function of the uppermost window to reset the height of the iframe
parent.parent.resize(realHeight);
//alert("realHeight:"+realHeight);
//alert(document.parentWindow.name);//get the name of the window where the container is located domainA
//error://alert(document.parentWindow.parent.name); // Access failed: Unable to access domainB
//alert(document.parentWindow.parent.parent.name);//The top-level window belongs to domainA, so it can be accessed
}
//After setting the src attribute of the iframe with different timestamps, you don't need to use setInterval()
//setInterval("invokeMethodInTopWindow()",100);
</script>
</body>
</html>
other.html in domainB
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onclick="proxy()">
<!-- Page embedded in domain A-->
<button type="button" onclick="btnClick()">Switch display</button>
<div style="display:none">
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
In JavaScript, there is a very important security limitation called "Same-Origin Policy".
This strategy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain as the document containing it.
The so-called homologous origin refers to the same domain name, protocol, and port.
</div>
<div style="display:block">
For example, a hacker program uses IFrame to embed the real bank login page on his page. When you log in with your real username and password,
His page can be read into the input content in your form through Javascript, so that the username and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real bank login page on his page. When you log in with your real username and password,
His page can be read into the input content in your form through Javascript, so that the username and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real bank login page on his page. When you log in with your real username and password,
His page can be read into the input content in your form through Javascript, so that the username and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real bank login page on his page. When you log in with your real username and password,
His page can be read into the input content in your form through Javascript, so that the username and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real bank login page on his page. When you log in with your real username and password,
His page can be read into the input content in your form through Javascript, so that the username and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real bank login page on his page. When you log in with your real username and password,
His page can be read into the input content in your form through Javascript, so that the username and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real bank login page on his page. When you log in with your real username and password,
His page can be read into the input content in your form through Javascript, so that the username and password can be easily obtained.
For example, a hacker program uses IFrame to embed the real bank login page on his page. When you log in with your real username and password,
His page can be read into the input content in your form through Javascript, so that the username and password can be easily obtained.
</div>
<!-- Pages embedded in the A domain in reverse->
<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<div.length)
div[i].style.display = (div[i].style.display == 'none') ? "block" : "none";
}
}
</script>
<script type="text/javascript">
function proxy(){
//alert("btn click");
//Get the height of this page
var scrollHeight = document.documentElement.scrollHeight;
//alert("Scrollbar height:"+scrollHeight);
//Set the height of the window first to the src property of the iframe belonging to domainA
var iframeDomainA = document.getElementsByName("domainA")[0];
//The ultimate goal is to solve the limitations of "same-origin policy" using a page of domainA as a proxy.
var url = "http://localhost:9000/agent";
/**Tip: Let the browser reload the iframe every time through a timestamp, so that the height of the nested iframe will be automatically set every time, avoiding the use of setInterval()*/
iframeDomainA.src = url+ "? time=" + new Date().getTime() + "#" + scrollHeight;
}
window.onload = proxy;
</script>
</body>
</html>