Demand One: How does the main Page a pass the data to the IFRAME B?
In this way, the main page needs to pass the data to the IFRAME B, and then the IFRAME B gets the data for specific processing.
Implementation mode
The trick is to use the hash value of the location object to pass the communication data, and we just need to add a #data string (data is the one you want to pass) behind the SRC B in main Page A, as shown in the following figure:
And then in the IFRAME B in some way to get to the real time here data can be, in fact, a common way is:
1. In the IFRAME B through the SetInterval method to set the timer, monitor location.href changes can obtain the above data information
2. Then the IFRAME B can be based on this data information for the corresponding logical processing
need two: How does iframe B pass data to homepage a?
In this way, the IFRAME B needs to pass the data to the main page, and then the homepage surface is processed according to the data given.
Implementation mode
The trick is to use a proxy Iframec, which is embedded in IFrame B, and the main page a must remain in the same domain, and then we can pass the first of the above communication method to the Iframec of the data of IFrame B. The next question is how to get Iframec to pass the data to main Page A, as shown in the following figure:
Because the Iframec and the home page are the same domain, it is much simpler to pass data between them, and our approach here is to use a frequently used attribute window.top (or use window.parent.parent), which returns the topmost level of the load browser Window object, so that we can directly use the main page a in the method, hahaha, simple.
Here, let's make a simple analysis and summary
The premise of this implementation is also the biggest drawback is that the content of the IFRAME must be we can control, but at least our implementation is based on the security rules of the browser, does not break 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 the third party App just load a JS seed file we provided to make it easy to use the various tools we provide for it.
Above the various tools, we use the form of the package to organize, maximize the implementation on-demand loading
The JS seed file in the first article only provides the basic method implementation and puts the most commonly used toolkit inside, such as highly adaptive
Through the seed file, we also provide the third party App some commonly used JS toolkit, and the direct use of similar YUI3 module dynamic loading mechanism can use the specified toolkit
Classify the data passed by the third party APP and homepage (self-invocation, login verification, data transfer, etc.)
The data passed is used to meet the JSON format of a particular specification and is sent through a uniform service export, and the main page provides a unified service interface to parse the data and invoke the corresponding method according to the specification
Also, is the issue of versioning, in order to minimize the impact on Third-party apps, all of these JS file versions are a backward-compatible strategy, the small version of the server set Squid cache specific frequency of the failure time to achieve, large version update according to the user's own needs manual changes
Of course, the above may not be the best solution, just hope to give you some help and guidance, we are gradually improving some of our implementation, such as version control this piece, we also have some problems to solve
The specific code
Main Page A's source code
Copy Code code as follows:
JS Code
/* Home Face a*/
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Homepage a</title>
<script type= "Text/javascript" >
function init () {
Document.domain = ' bai.sohu.com ';
Alert (' I am the main frame, embedded in the third party application Iframeb, start loading application ');
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 call Me (main frame) interface, the height of the iframeb to me, the specific value is: ' + h);
iframeb.style.height= H + + ' px ';
iframeb.src = ' # ' + H
};
</script>
<body onload= "Init ();" >
<p> I am the homepage frame, my domain is:bai.sohu.com</p>
<iframe id= "Frameb" style= "Display:none;" ></iframe>
</body>
The source code of IFRAMEB (iframepage.html)
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>iframeB</title>
<body onload= "Init ();" >
<p style= "height:500px;" > I am a three-party application, my domain is:test.com</p>
<iframe id= "Framec" style= "Height:1px;width:1px;display:none;" ></iframe>
</body>
<script type= "Text/javascript" >
function init () {
Alert (' I am a third-party app, the following begins to create a communication channel with the main frame in the same domain Iframec, and set its src, with # 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 (' home page set Me (IFRAMEB) src, pass the hash (#) to me passing it received the height: ' + location.hash);
},2000);
};
</script>
The source code of IFRAMEC (iframepagec.html)
Copy Code code as follows:
<script type= "Text/javascript" >
Document.domain = ' bai.sohu.com ';
Alert (' I (IFRAMEC) received Iframeb pass the height value through the parameter (#), I now call the main page method to set the Iframeb height ');
Top.callback (Window.location.href.split (' # ') [1]);
</script>
