javascript - How to use window.postmessage to communicate with parent window - Stack Overflow

admin管理员组

文章数量:1287656

I'm creating a react app that I want my users to embed on their websites. This app will be shown in two iframes but I want to only show one iframe at a time. So one part of the app would be a simple button, the second would be a form that pops up once a user has decided to use the app (it's a chat app.)

I have set up a very simple ponent that displays the button so that it can send a message to the parent website. I'm not sure what I'm doing wrong but when the window.postmessage event is sent, I get the error:

Uncaught DOMException: Blocked a frame with origin "http://localhost:3002" from accessing a cross-origin frame.

Here is the example parent website code:

<h1>Hello! This is some static content</h1>
    <iframe src="http://localhost:3002"
        style="width: 108px; height: 50px; padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; right: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom;"
        id="dbhchat"></iframe>
    <h3>Thanks for checking out my blog!</h3>
    <script>
        window.addEventListener('message', event => {
            // IMPORTANT: check the origin of the data! 
            if (event.origin.startsWith('http://localhost:3002')) {
                // The data was sent from your site.
                // Data sent with postMessage is stored in event.data:
                console.log(event.data);
            } else {
                // The data was NOT sent from your site! 
                // Be careful! Do not use it. This else branch is
                // here just for clarity, you usually shouldn't need it.
                return;
            }
        });
    </script>

and my ponent that sends the message to the parent window:

import React from 'react';
import { IconButton } from '@material-ui/core';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import './App.css';

function App() {
  const send = () => {
    if (window && window.parent) {
      console.log('we have message sending here', window.parent);
      window.parent.postMessage('message', 'http://localhost:3002', false);
    }
  }
  return (
    <div className="App">
      <header style={{ background: 'red' }} className="App-header">
        <IconButton onClick={send} color="primary" aria-label="upload picture" ponent="span">
          <PhotoCamera />
        </IconButton>
      </header>
    </div>
  );
}

export default App;

Thanks in advance for any help figuring this out!

I'm creating a react app that I want my users to embed on their websites. This app will be shown in two iframes but I want to only show one iframe at a time. So one part of the app would be a simple button, the second would be a form that pops up once a user has decided to use the app (it's a chat app.)

I have set up a very simple ponent that displays the button so that it can send a message to the parent website. I'm not sure what I'm doing wrong but when the window.postmessage event is sent, I get the error:

Uncaught DOMException: Blocked a frame with origin "http://localhost:3002" from accessing a cross-origin frame.

Here is the example parent website code:

<h1>Hello! This is some static content</h1>
    <iframe src="http://localhost:3002"
        style="width: 108px; height: 50px; padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; right: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom;"
        id="dbhchat"></iframe>
    <h3>Thanks for checking out my blog!</h3>
    <script>
        window.addEventListener('message', event => {
            // IMPORTANT: check the origin of the data! 
            if (event.origin.startsWith('http://localhost:3002')) {
                // The data was sent from your site.
                // Data sent with postMessage is stored in event.data:
                console.log(event.data);
            } else {
                // The data was NOT sent from your site! 
                // Be careful! Do not use it. This else branch is
                // here just for clarity, you usually shouldn't need it.
                return;
            }
        });
    </script>

and my ponent that sends the message to the parent window:

import React from 'react';
import { IconButton } from '@material-ui/core';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import './App.css';

function App() {
  const send = () => {
    if (window && window.parent) {
      console.log('we have message sending here', window.parent);
      window.parent.postMessage('message', 'http://localhost:3002', false);
    }
  }
  return (
    <div className="App">
      <header style={{ background: 'red' }} className="App-header">
        <IconButton onClick={send} color="primary" aria-label="upload picture" ponent="span">
          <PhotoCamera />
        </IconButton>
      </header>
    </div>
  );
}

export default App;

Thanks in advance for any help figuring this out!

• javascript
• reactjs
• postmessage

Share Improve this question Follow asked Aug 6, 2020 at 18:07 Atlante AvilaAtlante Avila 1,48833 gold badges1919 silver badges4141 bronze badges 2

• If your problem is the security error then what you can do is use '*' for the host. – programmerRaj Commented Aug 6, 2020 at 18:10
• Thanks, I tried that unfortunately no luck. – Atlante Avila Commented Aug 6, 2020 at 18:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I found a bit of a quirky solution to the problem. I don't really know why this works but simply adding e.preventDefault() to the react send function worked fine after that.

const send = (e) => {
    e.preventDefault();
    if (window && window.parent) {
      window.parent.postMessage({message: 'The message is being set up here', hide: 'dbhchat', show: 'dbhchat'}, '*');
    }
}

after adding that, all worked fine. If anyone can provide more details as to why that'd be great!

本文标签： javascriptHow to use windowpostmessage to communicate with parent windowStack Overflow