IFRAME cross-origin JavaScript access

Problem Extraction: The main page a.html is in the domain www.aaa.com. use ifameto embed B .html in the domain www.bbb.com. Now let B .html go into some operations and call the JS function onexcute in a.html. If you use "window. Parent. onexcute ();" in B .html, the call will not be executed, and no error will be prompted. During debugging, you will get "Permission denied ".
To access property "prompt information. If the two pages in the same domain are used in this way, this problem occurs in the Cross-Domain environment. This is the so-called "iframe cross-domain problem ".

In a.html

<SCRIPT type = "text/JavaScript"> function onexcute (wellstr) {// event response} </SCRIPT> <IFRAME id = "bframeid" src = "http://www.bbb.com/ B .html" width = "100%" Height = "100%"> </iframe>

In B .html, The onexcute (...) in a.html is called (......) Method.

 

Problem Analysis:

(12.16a.htmland B .html, use window. Parent. onexcute (…) In B .html (......), Cross-origin access is restricted by the browser's "force.

(2nd) on the Internet, it is very difficult to determine the resolution of iframe ", and the location of B .html windows can be accessed by the public. Location. Hash is used to store parameters to be passed. However, this problem is that a method call needs to trigger a JS function call, not just the acquisition of parameters. The period will detect the change of this value within the period.

(3) There is also a solution on the Internet: the first is the spoofing method, two webpages document. although the domain is different, you can force the same value as "aaa.com" to deceive IE (other browsers may not be effective ). It is not applicable to the reason that a large number of Script frameworks are used on the homepage, which affects the use of other functions. The second method is "Unlimited IFRAME in the same domain", because the attribute of parent access to IFRAME in the Cross-origin script is not limited. Callback is in the same domain, and JS function calls are not restricted ).

However, the event cannot be triggered immediately.

Solution: Combined with the above two methods (location. Hash Storage parameters, the same domain IFRAME script calls are not limited)

 

(1) Modify location. href of c.html in B .html to send an event (for example, btnevent. Hash is the part of the switch following the URL from "#", which is used to store parameters. Changing the hash value does not affect the refreshing of IFRAME; the parameter "redirected = true" after the URL is used to modify the URL (the URL is still the current page). The parameter is mainly used to access the window in c.html. onload event)

Function btnevent () {var STR = 'well _ 1, well_2 '; // Note: When framesobtains the c.html frame, the cframeid is the name attribute of IFRAME. // 'redirected1_true' indicates that the c.html page is refreshed, response to the onload event document. getelementbyid ('cframeid '). setattribute ('src', 'HTTP: // www.aaa.com/c.html? Redirected = true '+' # '+ Str);} <IFRAME id = "cframeid" name = 'cframe' src = "http://www.aaa.com/C.html" style = "display: none "> </iframe>

 

(2) InC.htmlRefresh the page to load the onload event.

 

Window. onload = function () {var url = Window. location. href; If (URL. indexof ('reccted = true')>-1) {var STR = location. hash; // information starting with # If (Str. length> 1) {STR = Str. substring (1);} window. parent. parent. onexcute (STR); window. location. href = 'HTTP: // www.aaa.com/c.html'; // restore status to facilitate B .html to respond to events again }}

 

Summary: In B .html, B .html can be used to control the location of its embedded IFRAME (cframe), resulting in the onload event triggered by its embedded IFRAME (because of page refreshing. The parameters passed from B .html are implemented by adding (with "#" Open header) hash values with the URL suffix. In fact, you can also skip the hash (since parameters are used, why not use two parameters ?) You can use two URL parameters, one is used to indicate the State (as shown in the preceding "redirected = true" example, one is used to pass B .htmlto call the parameters of the JS function in a.html (used to replace the method with the hash value appended with the URL above for passing parameters ).Similarly, if the reverseJS functions in callback. This problem can be solved, but the defect is that B .html is too frequently refreshed, and B .html is refreshed twice every time it is called.