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 @ 2021-05-30 21:14  三瑞  阅读(420)  评论(0)  编辑  收藏  举报