How does home page A transmit data to iframeB? How does iframeB transmit data to homepage A? There are good implementation ideas below. Interested friends can learn more.
Requirement 1: How does home page A transmit data to iframe B?
In this way, the home page needs to pass data to iframe B, and then iframe B obtains the data for specific processing.
Implementation Method
The trick is to use the hash value of the location object to transmit communication data, you only need to add A # data string (data is the data you want to transmit) after the src of iframe B in homepage A, as shown in:
Then, you can obtain the data in iframe B in some way. In fact, a common method is:
1. Set the timer using the setInterval method in iframe B and listen for changes in location. href to obtain the above data information.
2. Then iframe B can perform corresponding logic processing based on the data information.
Requirement 2: How does iframe B transmit data to homepage?
In this way, iframe B needs to pass data to the homepage, and then the homepage performs specific processing based on the obtained data.
Implementation Method
The trick is to use A proxy IframeC, which is embedded into iframe B and must be in the same domain as home page, then we can pass the data of iframe B to iframeC by making full use of the implementation principle of the first communication method. The next question is how to let iframeC transmit the data to homepage, as shown in:
Because iframeC and the home page are in the same domain, it is much easier to transmit data between them. Here we use a frequently used attribute window. top (you can also use window. parent. parent), it returns A reference to the top-level window object loaded into the browser, so that we can use the Chinese method on the home page A directly.
So far, let's make a simple analysis and summary.
The premise and biggest disadvantage of this implementation method is that the content in iframe must be controllable, but at least we implement this method based on browser security rules, the security of the application is not damaged.
Implementation Details
Try to consider the ease of use, scalability and maintainability, such:
This allows third-party apps to easily use the various tools we provide by loading a JS seed file.
The above tools are organized in the form of packages to maximize on-demand loading.
The JS seed file in Article 1 only provides the basic method implementation and puts the most common toolkit in it, such as highly adaptive
Through the seed file, we also provide some common JS toolkit for third-party apps, And you can directly use the dynamic loading mechanism similar to the YUI3 module to use the specified toolkit.
Classify data transmitted by third-party apps and home pages (such as self-calls, logon verification, and data transfer)
The transmitted data is in JSON format that meets specific specifications and is sent out through a unified service exit. The home page provides a unified service interface to parse the data and call corresponding methods according to the specifications.
There is also the issue of version control. To minimize the impact on third-party apps, the versions of all the above JS files adopt backward compatible policies, the minor version uses the server to set the expiration time of the SQUID cache for a specific frequency. The major version update is manually modified based on your needs.
Of course, the above may not be the best solution, but we hope to provide you with some help and guidance. We are also gradually improving some of our implementation methods, such as version control, we also have some problems to solve.
Specific Code
Source code of home page
The Code is as follows:
Js Code
/* Home page */
Home page
