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;

})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM