Electron Shell模块在用户默认浏览器中打开URL以及Electron DOM webview 标签

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>    
        .content{

            width: 100%;

            height: 400px;

            background: orange;


            overflow-y: auto;
        }
    </style>
  
</head>
<body>
       
    

    <br>


    <a id="adom" href="https://www.itying.com">itying.com</a>
    




    <!-- <webview id="myWebview" src="https://www.itying.com" style="position: fixed;width: 100%;height: 100%"></webview> -->
  

    <!-- 说明：

    1、electron5.x中建议使用iframe替代webview

    2、electronic的webview标签基于Chromium的webview，后者正在经历巨大的架构变化。这将影响webview的稳定性，包括呈现、导航和事件路由。我们目前建议不使用webview标签，并考虑其他替代方案，如iframe、electronic的BrowserView或完全避免嵌入内容的体系结构。

    来源：https://electronjs.org/docs/api/webview-tag

    -->
    <iframe id="myWebview" src="https://www.itying.com" style="position: fixed;width: 100%;height: 100%"></iframe>
    
    <script src="renderer/link.js"></script>

    
    <script src="renderer/webview.js"></script>
</body>
</html>

link.js

var {shell}=require('electron')

var aDom=document.querySelector('#adom');


aDom.onclick=function(e){
    

    // 阻止a标签的默认行为

    e.preventDefault();    

    var href=this.getAttribute('href');

    //sheel模块打开外部浏览器
    shell.openExternal(href)

}

webview.js

var {ipcRenderer}=require('electron');


var myWebviewDom=document.querySelector('#myWebview');



ipcRenderer.on('openWebview',function(event,data){


    // data就是链接地址

    myWebviewDom.src=data;

})

 

posted on 2020-12-28 09:18  LoaderMan  阅读(907)  评论(0)  编辑  收藏  举报

导航