Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

When I use webview and iframe,they can not comminicate with each other #210544

Closed
yuangegena opened this issue Apr 17, 2024 · 3 comments
Closed

When I use webview and iframe,they can not comminicate with each other #210544

yuangegena opened this issue Apr 17, 2024 · 3 comments
Assignees
@mjbvz
Labels
*dev-question VS Code Extension Development Question

Comments

@yuangegena
Copy link

Does this issue occur when all extensions are disabled?: Yes/No

Version: 1.88.1 (user setup)
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Windows_NT x64 10.0.22621

Steps to Reproduce:

  1. I used webview and iframe,then I sned message to iframe
this.sysConfigWebview.webview.html = `
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>test</title>
                    <style>
                    body, html, iframe {
                        width: 100%;
                        height: 100%;
                        margin: 0;
                        padding: 0;
                        border: none;
                        overflow: hidden;
                    }
                </style>
                </head>
                <body>
                    <iframe id="myIframe" style="width:100%; height:100%; border:none;" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"></iframe>
                    <script>
                        window.onload = function() {
                            const vscode = acquireVsCodeApi();
                            const iframe = document.getElementById('myIframe');
                            console.log('iframe', iframe)
                            iframe.src = 'http://localhost:5173/'
                            iframe.onload = function () {
                                // iframe.contentWindow.postMessage('Hello from Webview!', '*')
                            }

                            window.addEventListener("message",(data)=>{
                                console.log(data)
                            })
                        }
                    </script>
                </body>
                </html>
                `;

2.the iframe web which I used vue to render，I want to receive message， but the console is not printed

onMounted(() => {
  window.addEventListener('message', function (event) {
    console.log('Received message in iframe:', event.data);
  });
})

Did I write the wrong place?
Please take a look as soon as possible！Thank You！
@gjsjohnmurray
Copy link
Contributor

Is #94266 relevant?

@yuangegena
Copy link
Author

Is #94266 relevant?

Different from that。webview use postMessage but iframe cant receive

@mjbvz mjbvz added the *dev-question VS Code Extension Development Question label Apr 29, 2024
@VSCodeTriageBot
Copy link
Collaborator

We have a great extension developer community over on GitHub discussions and Slack where extension authors help each other. This is a great place for you to ask questions and find support.

Happy Coding!

@VSCodeTriageBot VSCodeTriageBot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mjbvz mjbvz

Labels
*dev-question VS Code Extension Development Question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gjsjohnmurray @mjbvz @yuangegena @VSCodeTriageBot