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; })
