Parent Code ( VSCode Extension Webview Code )
private renderHtml(): string {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${this._chatStyle}">
</head>
<body>
<iframe id="chatView" src="${url}"></iframe>
<script type="module" src="${this._chatSrc}"></script>
</body>
<script>
window.param = ${param};
</script>
</html>`;
}
this._chatSrc ( ChatView.js )
const vscode = acquireVsCodeApi();
const iframe = document.getElementById('chatView');
iframe.onload = () => {
const iframeWindow = iframe.contentWindow;
iframeWindow.postMessage(JSON.stringify(window.param, null, 2), '*');
};
const handleMessage = event => {
console.log('Received message:', event.data);
};
window.addEventListener('message', handleMessage);
Child Code( Python Streamlit )
from openai import OpenAI
import streamlit as st
js = """
<script>
window.addEventListener("message", (evt) => {
console.log('call')
});
window.parent.parent.postMessage("Some data", '*');
</script>
"""
st.components.v1.html(js, height=0)
When I use window.addEventListener
in Streamlit, it doesn’t seem to trigger. How can I receive data from the parent window in Streamlit using an event listener?