我正在創(chuàng)建一個反應應用程序,我希望我的用戶將其嵌入到他們的網(wǎng)站上。此應用程序?qū)@示在兩個 iframe 中,但我想一次只顯示一個 iframe。因此,該應用程序的一部分是一個簡單的按鈕,第二部分是一個表單,一旦用戶決定使用該應用程序(它是一個聊天應用程序)就會彈出。我設置了一個非常簡單的組件來顯示按鈕,以便它可以向父網(wǎng)站發(fā)送消息。我不確定自己做錯了什么,但是發(fā)送 window.postmessage 事件時,出現(xiàn)錯誤:Uncaught DOMException: Blocked a frame with origin "http://localhost:3002" from accessing a cross-origin frame.這是示例父網(wǎng)站代碼:<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>以及將消息發(fā)送到父窗口的組件: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); } }在此先感謝您提供幫助解決這個問題!
如何使用window.postmessage與父窗口通信
烙印99
2022-12-22 11:57:23