Cross-domain value transfer means transferring values ​​between the main page and iframe_javascript skills

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 is to use the hash value of the location object to pass communication data through it. We only need to set an additional #data string after the src of iframe B in the main page A (data is the data you want to pass), as shown in the following figure:

Then in iframe B, you can get the data here instantly through some method. In fact, a commonly used method is:

1. Set it in iframe B through the setInterval method. Timer, monitor 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 about iframe B What about passing 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

Implementation The trick 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 pass 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 simple to transfer data between them. More, our method here is to use a frequently used property window.top (you can also use window.parent.parent), which returns a reference to the top-level window object loaded in the browser, so that we can directly use it It’s the method in A on the main page, hahaha, it’s simple.
At this point, we will make a simple analysis and summary

The premise and biggest disadvantage of this implementation method is that the content in the iframe must be controllable by us, but at least our implementation method is based on It is above the browser's security rules and does not undermine the security of the application itself.
Some details that need to be considered during implementation

Try to take into account ease of use, scalability and maintainability, such as:

Let third-party apps only need to load a JS provided by us Seed files can be easily used with the various tools we provide
The various tools above are organized in the form of packages to maximize on-demand loading
The JS seeds in the first article The file 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 direct use is similar to YUI3 The dynamic loading mechanism of the module can use the specified toolkit
to classify the data passed by the third-party App and the main page (self-invocation, login verification, data transfer, etc.)
The data passed uses the data that meets specific specifications. JSON format and 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
Also, there is the issue of version control. In order to minimize the impact on third-party apps Impact, the versions of all the above JS files adopt a backward compatibility strategy. The small version is implemented by using the server to set the expiration time of the SQUID cache at a specific frequency. The large version update is manually changed according to the user's own needs
Of course, the above may not be The best solution, I just hope to 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 code The code is as follows:

Js 코드
/*메인 페이지 A*/




type="text/javascript">
function init(){
document.domain = 'bai.sohu.com'
alert('나는 제3자가 포함된 메인 프레임입니다. 애플리케이션 IframeB, 아래 애플리케이션 로드 시작')
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는 내(메인 프레임) 인터페이스를 호출하고 IframeB의 높이를 나에게 전달합니다. 구체적인 값은 ' h)입니다.
iframeB.style.height= h 10 'px'; 🎜>iframeB.src = '#' h
}

i 내 도메인은 bai.sohu.com

iframeB 소스 코드(iframePage.html)

복사 code

코드는 다음과 같습니다. < ;head>

;/head>

나는 타사 애플리케이션이고 내 도메인은 test입니다. .com

>



iframeC의 소스 코드




코드 복사

코드는 다음과 같습니다.