electron 弹出子窗口操作

最新推荐文章于 2024-07-02 21:44:37 发布

神奇大叔

最新推荐文章于 2024-07-02 21:44:37 发布

阅读量7.5k

点赞数

分类专栏： electron桌面应用文章标签： electron

本文链接：https://blog.csdn.net/weixin_43294560/article/details/105870284

版权

electron桌面应用专栏收录该内容

27 篇文章 5 订阅

订阅专栏

1、弹出子窗口
	var xx=window.open('url','自定义名');  返回BrowserWindowProxy,浏览器代理对象操作子窗口

2、关闭子窗口
	 xx.close();

3、子窗口向父窗口传递数据
	子窗口发送:window.opener.postMessage(数据);
	父窗口接收:
		window.addEventListener('message',(x)=>{
			x.data获取传递的数据
		});

window.open文档
 BrowserWindowProxy操作子窗口文档

代码示例:
子窗口页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="send()">向父窗口传信息</button>


    <script>
        var btn=document.querySelector('button');
        
        function send()
        {   
            
            window.opener.postMessage('from 子窗口');
        }

    </script>
</body>
</html>

父窗口页面:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <Button class='obtn'>弹出窗口</Button>
    <button class='gbtn'>关闭窗口</button>
    <div class='box'>
      <span class='sp'></span>
    </div>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

render.js:


var view=document.querySelector('.wb');
var sp=document.querySelector('.sp');
var btn=document.querySelector('.obtn');
var gbtn=document.querySelector('.gbtn');
var proxy;

btn.onclick=function(){
    //返回BrowserWindowProxy,浏览器代理对象操作子窗口
    proxy=window.open('./html/1.html','baidu');
}

gbtn.onclick=function(){
    proxy.close();
}

window.addEventListener('message',(msg)=>{

    console.log(msg.data);
});

神奇大叔

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
electron 弹出子窗口操作

1、弹出子窗口 var xx=window.open('url','自定义名'); 返回BrowserWindowProxy,浏览器代理对象操作子窗口2、关闭子窗口 xx.close();3、子窗口向父窗口传递数据子窗口发送:window.opener.postMessage(数据); 父窗口接收: window.addEventListener('message',(x...
复制链接

扫一扫

专栏目录