window.name = "hello world" window.location = "http://www.baidu.com"
The page jumps to Baidu's home page, but window.name is saved. It's still Hhello world.
First create the a.html file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a.html</title> </head> <body> <script> let data = ''; const ifr = document.createElement('iframe'); ifr.src = "http://localhost:8081/b.html"; ifr.style.display = 'none'; document.body.appendChild(ifr); ifr.onload = function() { ifr.onload = function() { data = ifr.contentWindow.name; console.log('Data received:', data); } ifr.src = "http://localhost:8080/c.html"; } </script> </body> </html> Recreate b.html File: <script> window.name = "The data you want!"; </script>
http://localhost:8080/a.html Remote server on request http://localhost:8081/b.html We can create a new iframe under this page. The src attribute of the iframe points to the server address (using the cross domain capability of the iframe tag). Set the window.name value in the server file b.html.
However, if the src source of an a.html page is different from that of the iframe of the page, you can't operate anything in the iframe, so you can't get the name value of the iframe. Therefore, we need to change the src area to point to a homologous HTML file after b.html is loaded, or set it to about:blank, At this time, we just need to create a blank c.html in the same directory as a.html. If you do not re point to src, you will get an error if you get the window.name directly.
[](
)3,postMessage:
postMessage is a newly added feature of HTML5. Cross document messaging is supported by Chrome 2.0 +, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6 +, and Safari 4.0 +.
First create the a.html file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a.html</title> </head> <body> <iframe src="http://localhost:8081/b.html" style='display: none;'></iframe> <script> window.onload = function() { let targetOrigin = 'http://localhost:8081'; //When you want to operate the current iframe, it's like postMessage() in the iframe. window.frames[0].postMessage('I'm going to send you a message!', targetOrigin); //*Indicates that any domain can listen. } //When I listen to the message event, I know that someone has sent me data. I can do the corresponding things after I get the data. Internal implementation of messages window.addEventListener('message', function(e) { console.log('a.html Received message:', e.data); }); </script> </body> </html>
Create an iframe, and use a method of iframe, postMessage, to http://localhost:8081/b.html Send a message, and then listen to message to get messages from other documents.
The same b.html file:
<script> window.addEventListener('message', function(e) { if(e.source != window.parent) { return; } let data = e.data; console.log('b.html Received message:', data); parent.postMessage('I've received the message!', e.origin); }) </script>
[](
)4. document.domain drop domain:
When the primary domain is the same but the sub domain is different, you can set document.domain to solve the problem. The specific method is to http://www.example.com/a.html and http://sub.example.com/b.html Add document.domain = "example. Com" to the two files respectively; Then create an iframe through the a.html file to control the iframe window for interaction. Of course, this method can only solve the situation that the primary domain is the same but the secondary domain is different. If you fantasize that setting the domain of script.example.com to qq.com is obviously useless, how to test it?
The test method is a little more complicated. You need to install nginx for domain name mapping. If nginx is not installed on your computer, please install it first: nginx news
Premise: the things behind the two domain names are the same.
First create an a.html file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a.html</title> </head> <body> <script> //document.domain allows the current domain to be de scoped so that they can operate and access each other. document.domain = 'example.com'; let ifr = document.createElement('iframe'); ifr.src = 'http://sub.example.com/b.html'; ifr.style.display = 'none'; document.body.append(ifr); ifr.onload = function() { let win = ifr.contentWindow; alert(win.data); } </script> </body> </html>
Create another b.html file:
<script> document.domain = 'example.com'; window.data = 'Data transmitted: 1111'; </script>
React
-
Introduce react
-
React single data stream
-
React lifecycle functions and the lifecycle of react components
-
Principles, differences, highlights and functions of react and Vue
-
Component communication of reactJs
-
Have you ever known about the virtual dom of react? How do you compare the virtual DOM
-
React is used in the project. Why choose react and what are the benefits of react
-
How do I get the real dom
-
Reason for choosing react
-
Life cycle function of react
-
Process after setState
-
react advanced components, you know?
-
jsx of React, functional programming
-
How does the react component determine whether to refresh
-
How to configure react router
-
Dynamic loading module of routing
-
What is Redux middleware? It accepts several parameters
-
How does the redux request middleware handle concurrency
**[CodeChina open source project: [analysis of front-end interview questions of large factories + learning notes of core summary + actual combat of real projects + latest explanation Video]](
)**
This article has been CodeChina open source project: [analysis of front-end interview questions of front-line large factories + core summary learning notes + real project practice + latest explanation Video] Collection, self-study programming route and series of technical articles are constantly updated