10、Electron使用HTML5 API创建子窗口，控制窗口，窗口之间的交互，从子窗口返回数据，页面来源，使用eval方法向子窗口传递数据

使用HTML5 API创建子窗口，控制窗口，窗口之间的交互，从子窗口返回数据，页面来源，使用eval方法向子窗口传递数据

index.js

复制代码
/**
 * 使用HTML5 API创建子窗口
 * window.open方法
 * window.open(url[,title][,attributes])
 * 1、url:要打开页面的链接（可以是本地的链接，也可以是Web链接）
 * 2、title:设置要打开页面的标题，如果在页面中已经设置了标题，那么 这个参数将被忽略
 * 3、attributes:可以设置与窗口相关的一些属性，例如，窗口的宽度和高度 
 * window.open方法的返回值 
 * 
 * BrowserWindowProxy 可以认为是BrowserWindow的代理类
 * 
 * 控制窗口
 * 1、获取窗口焦点 focus
 * 2、让窗口失去焦点状态 blur
 * 3、关闭窗口：close
 * 4、显示打印对话框:Print
 * 
 * 窗口之间的交互：最简单的数据传递方式
 * B.postMessage(data,'*')
 * 
 * 从子窗口返回数据
 * ipcRenderer.send(...)
 * ipcMain.on
 * 
 * 页面来源：“谁”使用url打开的新的子窗口。在本例中，"谁"是指index.html所在的域名
 * e.origin
 * 
 * 使用eval方法向子窗口传递数据
 * eval方法用来执行JavaScript代码
 */
const {app,BrowserWindow} = require('electron');
function createWindow(){
    win = new BrowserWindow({
        //show:false,
        webPreferences:{
            nodeIntegration: true, // 是否集成 Nodejs
            enableRemoteModule: true,
            contextIsolation: false,
        }
    });
    win.loadFile('index.html');
    win.on("ready-to-show",()=>{
        win.show();
    });
    if(process.platform!="darwin"){
        win.setIcon("images\\logn.jpg");
    }
    win.on('closed',()=>{
        console.log('closed')
        win=null;
    });
}
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
    console.log('window-all-closed');
    if(process.platform!='darwin'){

    }
});
app.on('activate',()=>{
    console.log('activate');
    if(win==null){
        createWindow();
    }
});
View Code
复制代码

index.html

复制代码
<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用window.open方法创建子窗口</title>
<script src="event.js"></script>
<body>
    <button onclick="onClick_OpenWindow()">打开子窗口</button>
    <br/>
    <button onclick="onClick_Focus()">获取焦点</button>
    <br/>
    <button onclick="onClick_Blur()">失去焦点</button>
    <br/>
    <button onclick="onClick_Close()">关闭窗口</button>
    <br/>
    <button onclick="onClick_Print()">显示打印对话框</button>
    <br/>
    <input id="data"/>
    <button onclick="onClick_SendMessage()">将数据传递到子窗口</button>
    <br/>
    <button onclick="onClick_Eval()">使用eval方法向子窗口传递数据</button>
    <br/>
    <label id="label"></label>
</body>
</html>
View Code
复制代码

event.js

复制代码
const remote = window.require('electron').remote;
const dialog =remote.dialog;
const {ipcRenderer}=window.require('electron');
const ipcMain=remote.ipcMain;

ipcMain.on('close',(event,str)=>{
    alert(str);
});

//显示简单的消息对话框
function onClick_OpenWindow()
{
    win=window.open("./child.html","子窗口","width=300,height=200");
    //win=window.open("https://wwww.baidu.com");
}

//获取窗口焦点
function onClick_Focus()
{
    if(win!=undefined){
        win.focus();
    }
}

//让窗口失去焦点状态 
function onClick_Blur()
{
    if(win!=undefined)
    {
        win.blur();
    }
}

//关闭窗口
function onClick_Close()
{
    if(win!=undefined){
        if(win.closed){
            alert("子窗口已经关闭！");
        }
        win.close();
    }
}

//显示打印对话框 
function onClick_Print()
{
    if(win!=undefined)
    {
        win.print();
    }
}

//显示打印对话框 
function onClick_SendMessage()
{
    if(win!=undefined)
    {
        //win.postMessage(data.value,'*');
        win.postMessage({"name":data.value},'*');
    }
}

function onLoad(){
    window.addEventListener("message",function(e){
        //data.innerText=e.data;
        data.innerText=e.data.name;
        this.alert(e.origin);
    });
}

function closeWindow(){
    const win=remote.getCurrentWindow();
    ipcRenderer.send('close','窗口已关闭！');
    win.close();
}

//显示打印对话框 
function onClick_Eval()
{
    if(win!=undefined)
    {
        win.eval('data.innerText="'+data.value+'"');
    }
}
View Code
复制代码

child.html

复制代码
<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用window.open方法创建子窗口的子窗口</title>
<script src="event.js"></script>
<body onload="onLoad()">
    <label id="data">用window.open方法创建子窗口的子窗口</label>
    <br/>
    <button onclick="closeWindow()">关闭窗口</button>
    <br/>
</body>
</html>
View Code
复制代码

 

posted @   三瑞  阅读(427)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天：
2018-05-30 asp.net Ajax调用Aspx后台方法
点击右上角即可分享
微信分享提示
AI IDE Trae