Cross domain transfer is the transfer of values between the home page and the iframe
- 2020-03-30 00:46:11
- OfStack
Requirement 1: how does main page A pass data to iframe B?
This way, the home page needs to pass the data to the iframe B, and then the iframe B gets the data for specific processing
implementation
The trick is to take the hash value of the location object and pass the communication data through it. All we need to do is set the SRC of iframe B followed by the additional #data string (data is the data you want to pass) in the main page A, as shown in the following figure:
And then in the iframe B somehow you can get the data here in real time, and one of the common ways is:
1. Set the timer in iframe B by setInterval method, and listen for the change of location.href to obtain the above data information
2. Then the iframe B can perform corresponding logical processing based on this data information
Requirement 2: how does iframe B pass data to home page A?
This way, the iframe B needs to pass the data to the home page, and then the home page does specific processing based on the data it gets
implementation
Implementation technique is to use A proxy IframeC, it is embedded into the iframe B, and the main page is A must keep with the domain, and then we make full use of the above through it the first communication principle can give IframeC iframe B data transmission, the next question is how to make IframeC the data is passed to the main page A, as shown in the figure below:
Because, iframeC and home page is the same domain, so transfer data between them becomes much simpler, we often use this way is to use A properties window. The top (can use window. The parent. The parent), it returns to load the browser window object references to the top, so that we can direct the main screen in A way, ha ha ha, simple.
That's all for a brief analysis
The premise and biggest drawback of this approach is that the content in the iframe must be in our control, but at least our approach is based on the browser's security rules and doesn't break the security of the application itself.
Some details to consider when implementing
Ease of use, extensibility, and maintainability should be considered as much as possible. For example:
For the third-party App, we only need to load a JS seed file provided by us to easily use the various tools provided by us
For the various tools above, we organize them in the form of packages to maximize load on demand
The JS seed file in the first article only provides basic method implementations, and includes the most commonly used toolkits, such as highly adaptive
Through the seed file, we also provide some commonly used JS toolkits for third-party apps, and the specified toolkits can be used directly by using the dynamic loading mechanism similar to the YUI3 module
Classify the data delivered by the third-party App and the main page (self-call, login verification, delivery data, etc.)
The data is passed in a JSON format that meets a specific specification and is sent out through a unified service exit, with a unified service interface provided on the main page to parse the data and invoke the corresponding methods according to the specification
In addition, there is the issue of version control. In order to minimize the impact on the third-party App, the versions of all the above JS files adopt the policy of backward compatibility. The small version USES the server to set the expiration time of specific frequency of SQUID cache, and the large version updates are manually changed according to the user's own requirements
Of course, the above may not be the optimal solution, just hope to give you some help and guidance, we are gradually improving some of our implementation methods, such as version control, we also have some problems to solve
Specific code
Main page A source
IframeB (iframePage. HTML) source code
IframeC (iframePageC. HTML) source code
This way, the home page needs to pass the data to the iframe B, and then the iframe B gets the data for specific processing
implementation
The trick is to take the hash value of the location object and pass the communication data through it. All we need to do is set the SRC of iframe B followed by the additional #data string (data is the data you want to pass) in the main page A, as shown in the following figure:
And then in the iframe B somehow you can get the data here in real time, and one of the common ways is:
1. Set the timer in iframe B by setInterval method, and listen for the change of location.href to obtain the above data information
2. Then the iframe B can perform corresponding logical processing based on this data information
Requirement 2: how does iframe B pass data to home page A?
This way, the iframe B needs to pass the data to the home page, and then the home page does specific processing based on the data it gets
implementation
Implementation technique is to use A proxy IframeC, it is embedded into the iframe B, and the main page is A must keep with the domain, and then we make full use of the above through it the first communication principle can give IframeC iframe B data transmission, the next question is how to make IframeC the data is passed to the main page A, as shown in the figure below:
Because, iframeC and home page is the same domain, so transfer data between them becomes much simpler, we often use this way is to use A properties window. The top (can use window. The parent. The parent), it returns to load the browser window object references to the top, so that we can direct the main screen in A way, ha ha ha, simple.
That's all for a brief analysis
The premise and biggest drawback of this approach is that the content in the iframe must be in our control, but at least our approach is based on the browser's security rules and doesn't break the security of the application itself.
Some details to consider when implementing
Ease of use, extensibility, and maintainability should be considered as much as possible. For example:
For the third-party App, we only need to load a JS seed file provided by us to easily use the various tools provided by us
For the various tools above, we organize them in the form of packages to maximize load on demand
The JS seed file in the first article only provides basic method implementations, and includes the most commonly used toolkits, such as highly adaptive
Through the seed file, we also provide some commonly used JS toolkits for third-party apps, and the specified toolkits can be used directly by using the dynamic loading mechanism similar to the YUI3 module
Classify the data delivered by the third-party App and the main page (self-call, login verification, delivery data, etc.)
The data is passed in a JSON format that meets a specific specification and is sent out through a unified service exit, with a unified service interface provided on the main page to parse the data and invoke the corresponding methods according to the specification
In addition, there is the issue of version control. In order to minimize the impact on the third-party App, the versions of all the above JS files adopt the policy of backward compatibility. The small version USES the server to set the expiration time of specific frequency of SQUID cache, and the large version updates are manually changed according to the user's own requirements
Of course, the above may not be the optimal solution, just hope to give you some help and guidance, we are gradually improving some of our implementation methods, such as version control, we also have some problems to solve
Specific code
Main page A source
Js code
<!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> The main page A</title>
<script type="text/javascript">
function init(){
document.domain = 'bai.sohu.com';
alert(' I am the main framework, embedded with third-party applications IframeB, Let's start loading the 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, put IframeB The specific value is: ' + h);
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ h
};
</script>
</head>
<body onload="init();">
<p> I am the home page frame and my domain is: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</body>
</html>
IframeB (iframePage. HTML) source code
<!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'm a third party. App , now start creating a communication channel that is codomain with the main frame IframeC, And set its src with # 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 Settings I ( IframeB ) src Through the Hash ( # ) pass me the height it received: ' + location.hash);
},2000);
};
</script>
IframeC (iframePageC. HTML) source code
<script type="text/javascript">
document.domain = 'bai.sohu.com';
alert(' I ( IframeC ) received iframeB By parameter ( # Pass me the height value and I will now call the home page method to set it IframeB The height of the ');
top.callback(window.location.href.split('#')[1]);
</script>