Electron常用api之webview

duansamve

已于 2022-09-07 14:36:56 修改

阅读量2.9k

点赞数 1

分类专栏： electron 文章标签： electron

于 2022-09-03 23:05:39 首次发布

本文链接：https://blog.csdn.net/duansamve/article/details/126683801

版权

electron 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

Electron提供了webview标签，用来嵌入Web页面。

它作用上类似于HTML里的iframe标签，但跑在独立进程中，主要出于安全性考虑。它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的.因为这能保证应用的安全性不受嵌入内容的影响。

开启webview

main.js

        webPreferences: {
            webviewTag: true, // 开启webview
        }

常用属性：

preload

在其他脚本执行之前预加载一个指定的脚本。

渲染进程：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>父窗口</h1>
    <div><button onclick="confirm()">确认</button></div>
    <webview src="http://www.baidu.com" preload="./render.js"></webview>
</body>
</html>

render.js

setTimeout(function(){
    alert(document.getElementById("su").value);
    document.getElementById("su").onclick = function(){
        alert("您点击了搜索按钮！");
    }
}, 5000)

常用方法：

insertCSS(css)：

css String

executeJavaScript(code, userGesture, callback)：

code String
userGesture Boolean - 默认 false.
callback Function (可选) - 回调函数.
result 评估 code ，如果 userGesture 值为 true ，它将在这个page里面创建用户手势. HTML APIs ，如 requestFullScreen,它需要用户响应，那么将自动通过这个参数优化.