javascript - 如何在 iFrame 上使用 postMessage
问题描述
我有 2 个具有以下域的 nodeJS 应用程序:
- 本地主机:8000
- 本地主机:3000
在 localhost:3000 中,我有一个 textarea 和一个提交按钮。
我想将 textarea 的内容(使用 postMessage)发布到 localhost:8000/(some_id),并在 localhost:8000 页面上显示内容。
然后,我想在 localhost:3000 页面中显示 localhost:8000/(some_id) 的 iFrame。
我在完成这件事时遇到了很多麻烦。我必须使用 postMessage() 以这种方式完成它。
PS:我知道最好避免使用 iFrame,但是出于我的应用程序的目的,这是必须使用的。
解决方案
无论您postMessage
在一侧做什么,都将发送给message
另一侧的听众。
// in the parent document
iframeElement.contentWindow.postMessage('hi!');
// in the iframe
window.addEventListener('message', ({ data }) => {
console.log('i got some data!', data); // i got some data! hi!
});
您也可以采用另一种方式,在 iframe 源中使用并在父文档中window.parent.postMessage()
监听它。window.addEventListener('message', ...)
推荐阅读
- css - 无法从 Vue 路由器链接中删除下划线
- mysql - 错误 1045 (28000):拒绝用户 'idris'@'localhost' 的访问(使用密码:否)
- graph - 这个问题可以在没有 bfs 或存储边的情况下完成吗?
- javascript - cropper doesn't load in img element in a modal
- javascript - 无法使用烧瓶和 render_template 选项获取所需的 html 页面
- c++ - how to generate a compare function from a pointer to member function?
- javascript - String (direct link to modal) gets repeatedly appended to URL
- c# - 暮光之声
- DotNetCore - Digits 参数始终为空 - android - fetching data from Firebase with Android Kotlin
- java - 在反应流上递归加载和映射