前端学习之路Electron——子窗口传递父窗口

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

HarryHY

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

阅读量1.9k

点赞数

分类专栏： # Electron

本文链接：https://blog.csdn.net/HarryHY/article/details/105663881

版权

Electron 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

子窗口html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子级页面</title>
</head>
<body>
    <div id='children'>
        这是一个子窗口页面
    </div>

</body>
<script>
    var children = document.querySelector('#children');
    children.onclick = function(e){
        window.opener.postMessage('正在待命');
    }
</script>
</html>

父html部分：

<!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 id="btn">
        打开新的窗口
    </button>
    <div>

    </div> -->
    <a id="aHref" href="https://www.baidu.com/">打开外部链接</a>
    <div id="myweb">
        open myweb
    </div>
    <div id='fatview'>

    </div>
    <script src="./render/openweb.js"></script>
</body>
</html>

父窗口的JS部分：

window.addEventListener('message',(msg)=>{
    let {data} = msg
    let fatview = document.querySelector('#fatview');
    // fatview.innerHTML = JSON.stringify(data)
    fatview.innerHTML = data
})

const {shell} = require('electron');
const aHref = document.querySelector('#aHref');
aHref.onclick = function(e){
    e.preventDefault();
    let href = this.getAttribute('href');
    shell.openExternal(href)
}
const myweb = document.querySelector('#myweb');
myweb.onclick = function(e){
    window.open('./chidpage.html')
}
window.addEventListener('message',(msg)=>{
    let {data} = msg
    let fatview = document.querySelector('#fatview');
    // fatview.innerHTML = JSON.stringify(data)
    fatview.innerHTML = data
})

注释的这行为字符串模式

注意

这里是  ./ 而不是 ../
myweb.onclick = function(e){
    window.open('./chidpage.html')
}

HarryHY

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习之路Electron——子窗口传递父窗口

子窗口html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
复制链接

扫一扫

专栏目录