After the latest vue project packaging, an error occurred in the console as follows:
chunk-libs.e495f7a4.js:41 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
Use postMessage to achieve cross-domain solution 'Failed to execute 'postMessage' on 'DOMWindow''
Use iframe+postMessage to solve cross-domain problems. Let’s first go through the principles.
principle:
The sender uses the postMessage method to push the message to the receiver. The first parameter is the content of the push, and the second parameter is the domain name that is allowed to be accessed;
The receiver receives data by listening to the message method.
Achieving cross-domain requires two servers from different sources.
I opened two tomcats with different ports locally; (the following is my file path)
①tomcat/webapps/iframe/parent.html (port number 8088)
②tomcat1/webapps/iframe/child.html (port number 8089)
Next start coding
tomcat/webapps/iframe/parent.html：
1 <iframe src="localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">
2 <p>Your Browser dose not support iframes</p>
3 </iframe>
4 <input type="text" id="message">
5 <input type="button" value="this is message" οnclick="sendIt()">
6 <script>
7 var myIframe = document.getElementById('ifr1')
8 function sendIt () {
9 myIframe.contentWindow.postMessage(document.getElementById('message').value, 'localhost:8089')
10 }11 </script>
tomcat1/webapps/iframe/child.html：
1 window.addEventListener('message', function (e) {
alert(e.data)
2 })
Ideal state-YY:
The parent page inserts the child page through the iframe, enters the content in the input box, and then pushes the content as information to the child through the postMessage method. The child page receives the data by listening to the message method. Perfect!
refresh run
Snapped! Slap in the face! ! !
What the hell is this?
'The provided origin ('localhost://')' does not match the origin of the receiver ('http://localhost:8088')
I don’t understand. What’s going on? Look for the problem. Is it because the protocol starting with http is missing?
try it:
tomcat/webapps/iframe/parent.html：
1 <iframe src="http://localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">
2 <p>Your Browser dose not support iframes</p>
3 </iframe>
4 <input type="text" id="message">
5 <input type="button" value="this is message" οnclick="sendIt()">
6 <script>
7 var myIframe = document.getElementById('ifr1')
8 function sendIt () {
9 myIframe.contentWindow.postMessage(document.getElementById('message').value, 'http://localhost:8089')
10 }
11 window.addEventListener('message', function (e) {
12 alert(e.data)
13 })
14 </script>
refresh run
That’s great! (Yes, you can, it’s that simple)
Next, obtain the information from the child in the parent:
tomcat/webapps/iframe/parent.html：
1 <iframe src="http://localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">
2 <p>Your Browser dose not support iframes</p>
3 </iframe>
4 <input type="text" id="message">
5 <input type="button" value="this is message" οnclick="sendIt()">
6 <script>
7 var myIframe = document.getElementById('ifr1')
8 function sendIt () {
9 myIframe.contentWindow.postMessage(document.getElementById('message').value, 'http://localhost:8089')
10 }
11 window.addEventListener('message', function (e) {
12 alert(e.data)
13 })
14 </script>
Added message listening event
tomcat1/webapps/iframe/child.html：
1 <input type="button" name="demoBtn" id="demoBtn" value="click">
2 <script>
3 window.addEventListener('message', function (e) {
4 console.log(e)
5 if (e.data.type === 'article') {
6 alert(e.data.msg.success)
7 } else {
8 alert(e.data)
9 }
10 })
11 function showTop () {
12 console.log('你好！')
13 }
14 document.getElementById('demoBtn').onclick = function () {
15 top.postMessage('hedfs', 'http://localhost:8088')
16 }
17 </script>
Pass parameter 'hedfs' to the file under the domain 'http://localhost:8088'
refresh run
OK! Completed, the above is the cross-domain solution idea of postMessage and iframe
If you have anything you don’t understand, you can follow the [H5 front-end development community] WeChat official account and leave me a message! You can also get Taobao coupons!
