zoukankan      html  css  js  c++  java
  • 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; 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; 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;
    
    })
  • 相关阅读:
    软件测试
    python学习之路
    好用的在线画图工具processon
    spring-boot集成dubbo
    公众号开放,关注软件开发过程中的哪些坑
    crontab 中curl命令无法正常执行
    近一月翻阅资料小结
    nginx+tomat8负载后,利用redis实现tomcat8的session共享
    centos7 安装nginx
    centos 上安装redis 3.0.5
  • 原文地址:https://www.cnblogs.com/loaderman/p/12150010.html
Copyright © 2011-2022 走看看