When the iframe is nested in different port numbers or even different IP addresses, an error is reported when the parent page calls the method of the child page
SecurityError: Blocked a frame with origin from accessing a cross-origin frame…
Cause of the problem
Under different port numbers, the traditional iframe nested method cannot be used.
document.getElementById("mainFrame").contentWindow.xxxx();
Cause
Homologous security policy
you can’t use JavaScript to access an <iframe>, if you can, it will be a huge security flaw. Prevent scripts from trying to access frames with different sources for the same source policy browser.
If at least one part of the address is not reserved, the source is considered different:
<protocol>://<hostname>:<port>/path/to/page.html
To access an iframe, the protocol, host name, and port must be the same as the domain.
Examples
Here’s what happens when you try to access the following URL
http://www.example.com/home/index.html
URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html.html -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different hostname & protocol
How to Fix
Although the same origin policy prevents scripts from accessing the content of different origin sites, if you have both pages, you can use to window.postmessageand
its related message events send messages between two pages to solve this problem.
On the main page:
var frame = document.getElementById('your-frame-id');
frame.contentWindow. postMessage (data, '*');
data can be string, boolean, number, array, object
In the iframe subpage
window. addEventListener ('message', function(event) {
//event.data gets the data passed to it
});
Note: the PostMessage of the parent page triggers the addeventlistener
Read More:
- [Solved] Vue2 Cross-domain Error: AxiosError net::ERR_FAILED, Network Error, ERR_NETWORK
- [Solved] fontconfig cross-compilation Error: PRI_CHAR_WIDTH_STRONG
- How to download files by post submission under Ajax
- [Chrome]: DevTools failed to load source map… (How to Solve)
- How to open a page in a new window by Vue router
- Vue: How to Fix “not displaying the holder in IE9 and below”
- How to Solve electron import page Error
- @requestbody: How to Use or Not Use
- How to Fix “HTTP 405 method not allowed” Error
- React: How to Solve Web3 import error
- Vue2.0: How to Use vue3 api to encapsulate Axios
- How to Solve VUE Error: Avoid mutating a prop directly since the value will be overwritten …
- How to Solve Vue-devtool Package Error
- How to React page to achieve entry and exit animation
- How to Solve Node start error listen eacces 0.0.0.0:810
- SwiftUI 2.0: How to Import Files into iOS Apps
- How to use HPQC on Chrome browser
- How to Solve Converting circular structure to JSON‘ Error
- Javascript: How to Use Date.Now() to implement front-end frequency limit
- How to Solve “Vue is not defined” Error