Requirement 1: How to transfer data from main page A to iframe B?
In this way, the main page needs to pass data to iframe B, and then iframe B will perform specific processing after obtaining the data.
Implementation method
The trick to achieve this is to use the hash value of the location object to pass communication data through it. We only need to set the src of iframe B in the main page A and add a #data string after it (data is the data you want to pass), as shown in the figure below Show:
Then in iframe B, you can get the data here instantly through some method. In fact, a commonly used method is:
1. Set the timer through the setInterval method in iframe B, and monitor the changes in location.href to obtain the above data information.
2. Then iframe B can perform corresponding logical processing based on this data information.
Requirement 2: How does iframe B pass data to main page A?
In this way, iframe B needs to pass data to the main page, and then the main page will perform specific processing after obtaining the data.
Implementation method
The trick of implementation is to use a proxy IframeC, which is embedded in iframe B and must remain in the same domain as the main page A. Then we can use it to fully utilize the implementation principle of the first communication method above to transfer the data of iframe B To iframeC, the next question is how to let iframeC pass the data to the main page A, as shown in the figure below:
Because iframeC and the main page are in the same domain, it becomes much simpler to transfer data between them. Our method here is to use a frequently used attribute window.top (you can also use window.parent.parent), which Returns a reference to the top-level window object loaded into the browser, so that we can directly use the method in main page A, hahaha, simple.
At this point, we make a simple analysis and summary
The premise and biggest disadvantage of this implementation is that the content in the iframe must be controllable by us, but at least our implementation is based on the browser's security rules and does not undermine the security of the application itself.
Some details to consider when implementing
Try to take into account ease of use, scalability and maintainability, such as:
Let third-party apps only need to load a JS seed file we provide to easily use the various tools we provide for them.
We organize the above various tools in the form of packages to maximize on-demand loading.
The JS seed file in the first item only provides basic method implementation, and puts the most commonly used toolkits in it, such as highly adaptive
Through seed files, we also provide some commonly used JS toolkits to third-party apps, and the specified toolkits can be used directly using a dynamic loading mechanism similar to the YUI3 module.
Classify data passed by third-party apps and main pages (self-call, login verification, passed data, etc.)
The transferred data uses JSON format that meets specific specifications and is sent out through a unified service outlet. The main page provides a unified service interface to parse the data and call the corresponding methods according to the specifications.
There is also the issue of version control. In order to minimize the impact on third-party apps, the versions of all the above JS files adopt a backward compatibility strategy. Small versions are implemented by using the server to set the expiration time of the SQUID cache at a specific frequency. Major version updates are manually changed according to the user's own needs
Of course, the above may not be the optimal solution, but I hope it can give you some help and guidance. We are also gradually improving some of our implementation methods, such as version control. We also have some problems that need to be solved.
specific code
Source code of main page A
Copy the code code as follows:
Js code
/*Main page A*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main page A</title>
<script type="text/javascript">
function init(){
document.domain = 'bai.sohu.com';
alert('I am the main frame, embedded with a third-party application IframeB, the application will start loading below');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'block';
};
function callback(h){
var iframeB = document.getElementById('frameB');
alert('IframeC calls my (main frame) interface and passes the height of IframeB to me. The specific value is: ' + h);
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ h
};
</script>
</head>
<body onload="init();">
<p>I am the homepage frame, and my domain is: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</body>
</html>
Source code of iframeB (iframePage.html)
Copy the code code as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
</head>
<body onload="init();">
<p style="height:500px;">I am a third-party application, and my domain is: test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</body>
</html>
<script type="text/javascript">
function init(){
alert('I am a third-party App. Let's create a communication channel IframeC in the same domain as the main frame, set its src, and use the # sign to pass the height value');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
iframeTag.src = iframeSrc + pageHeight;
iframeTag.style.display = 'block';
window.setTimeout(function(){
alert('The main page sets the src of my (IframeB) and passes me the height it receives through Hash (#): ' + location.hash);
},2000);
};
</script>
Source code of iframeC (iframePageC.html)
Copy the code code as follows:
<script type="text/javascript">
document.domain = 'bai.sohu.com';
alert('I (IframeC) received iframeB passing me the height value through the parameter (#), I now call the main page method to set the height of IframeB');
top.callback(window.location.href.split('#')[1]);
</script>