Introduction to cross-domain mutual access methods between iframe and main frame

Today I just need to use the implementation method of mutual access between iframe and main frame. I happened to see this article. It is really good. I would like to share it. Friends who need it can refer to it

1. Same Mutual access between domains

Assume that A.html and b.html domains are both localhost (same domain)
The iframe in A.html is embedded in B.html, name=myframe
A.html There is js function fMain()
B.html has js function fIframe()
It is necessary to implement A.html to call fIframe() of B.html, and B.html to call fMain() of A.html

A.html

      
  
A.html main
 
   

B.html

##

      
  
B.html iframe
 
  

Click

A.htmlexec iframe function button, the execution is successful, andiframe function execute successpops up. As shown below

click the exec main function button of

B.html, the execution is successful, andmain function execute successpops up. As shown below

2. Cross-domain mutual access

Assume that A.html domain is localhost and B.html domain is 127.0. 0.1 (cross-domain)

The localhost and 127.0.0.1 are used here just to facilitate testing. Localhost and 127.0.0.1 are already in different domains, so the execution effect is the same.
In actual use, just change to www.domaina.com and www.domainb.com.
The iframe in A.html is embedded in B.html, name=myframe
A.html has js function fMain()
B.html has js function fIframe()
Need to implement A.html to call B .html's fIframe(), B.html calls A.html's fMain() (cross-domain call)

If you use the above same-domain method, the browser determines that A.html and B.html are in different domains. There will be an error message.

Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://127.0.0.1". Protocols, domains, and ports must match.

Implementation principle:

Because the browser prohibits access from different domains for security reasons. Therefore, as long as the calling and executing parties are in the same domain, they can access each other.

First, how does A.html call the fIframe method of B.html

1. Create an iframe in A.html
2. Place the iframe page under the same domain as B.html and name it execB.html
3.execB.html contains the js call that calls the fIframe method of B.html

so that A.html can call B through execB.html .html’s fIframe method.

Similarly, B.html needs to call the A.html fMain method, and B.html needs to be embedded in the execA.html

execA.html in the same domain as A.html to call the A.html fMain method. js call

This way, A.html and B.html can call each other across domains.

A.html

      
  
A.html main
 
   

B.html

      
  
B.html iframe
 
  

execA.html

execB.html

Execute as shown below:

The above is the detailed content of Introduction to cross-domain mutual access methods between iframe and main frame. For more information, please follow other related articles on the PHP Chinese website!