electron 中 webview的使用範例解析

2023-02-20 06:00:54

正文

webview 想必都有所瞭解，比如：微信小程式巢狀H5

那麼我們在electron中怎麼使用webview呢？

我們先跟著官方檔案展示一下，看是否能有效果；

若要在應用程式中嵌入網頁, 請將 webview 標籤新增到應用程式的被嵌入頁面中 (這是將顯示外來內容的應用程式頁)。在最簡單的例子中, webview 標籤包括網頁的 src 和控制 webview 容器外觀的 css 樣式:

這是官網示列

<webview id="foo" 
    src="https://www.electronjs.org/zh/docs/latest/api/webview-tag" 
    style="display:inline-flex; width:750px; height:calc(100vh - 5px)">
</webview>

展示效果：

既然我們現在能展示了，說明沒得問題正常使用的沒得問題的，那麼我們就需要了解一些我們在工作中可能會遇到的場景

獲取webview的dom
監聽頁面對否顯示
禁止開啟新視窗
重新整理頁面
上一頁
下一頁

獲取webview的dom

先建立一個視窗，子視窗；可以看這篇文章會講述怎麼建立新視窗

electron建立新視窗（模態框）並相互傳值，主程序傳值給子程序

webview 頁面

<webview id="foo"
      autosize="on"
      allowpopups
      :src="url"
      :data-home="url"
      scrollbars="none"
      partition="modal-webview"
      :preload="preloadPath"
      style="display:inline-flex; width:750px; height:calc(100vh - 5px)">
    
</webview>

webview頁面的程式碼

在webview標籤中設定:preload="preloadPath"；然後返回相關dom字串，並且在addEventListener中去監聽引數是否返回；

這兒的時候大家可以靈活運用，比較是依靠原生去獲取dom上的值，如果你直接獲取某個標籤的值的話，你直接獲取標籤的text的值即可；根據自己的需求去做相關的操作即可

    const preloadPath = computed(()=>{
      return path.join(__static, "/preload.js");
    })
    onMounted(() => {
        nextTick(()=>{
            // 獲取webview的dom 
          data.webview = document.querySelector("#foo");
            // 監聽頁面是否渲染完成
          data.webview.addEventListener("did-finish-load", (e) => {
            data.webview.addEventListener("ipc-message", async (event) => {
              console.log(event); // 獲取引數
              if (event.channel == 'foo-html-content') {
                const html = event.args[0]; // 獲取的dom
                console.log(html);
              }
            })
            // 通知獲取webview並返回引數,這個主要是preload.js裡面的東西
            data.webview.send("foo");
          })
        })
    })

新建public/preload.js檔案

主要是獲取頁面的一些標籤，也可以根據相關類名獲取

// public/preload.js
const { ipcRenderer } = require("electron");
ipcRenderer.on('foo',() => {
    const htmlContent = document.querySelector("html").innerHTML;
    ipcRenderer.sendToHost("foo-html-content", htmlContent);
})

這樣就可以獲取到webview展示內容的dom標籤了

監聽頁面對否顯示

以下是addEventListener的一些方法：

1.did-start-loading 頁面開始載入

2.load-commit 主頁面檔案載入

3.page-title-updated title

4.dom-ready 主頁面 dom 載入完成

5.load-commit frame檔案載入

6.did-frame-finish-load frame 載入完成

7.did-frame-finish-load 最後一個是主框架frame 載入完成

8.did-finish-load 頁面載入完成

9.page-favicon-updated 網頁 icon

10.did-stop-loading 頁面停止載入

禁止開啟新視窗

我們在使用掘金的過程中，點選文章時他會開啟一個新的視窗；原因是設定的allowpopups屬性；但是將allowpopups改為false時，點選文章會沒效果；所以需要將allowpopups屬性刪除，然後根據下面的程式碼；就會在同視窗下實現跳轉效果；

data.webview.addEventListener('new-window',(e)=>{
    const urlClass = new URL(e.url);
    const { protocol } = urlClass;
    if (protocol === "http:" || protocol === "https:") {
      ata.url = e.url;
    }
})

重新整理頁面

可以重新整理當前頁面

// 重新整理頁面
    const refresh = () => {
      data.webview.reload();
    }

當我們點選了文章以後，想返回上一頁的時候可以使用

// 上一頁
    const back = () =&gt; {
      data.webview.goBack();
    }

// 下一頁
    const forward = () => {
      data.webview.goForward();
    }

以上就是今天的全部內容了；

以上就是electron 中 webview的使用範例詳解的詳細內容，更多關於electron webview使用的資料請關注it145.com其它相關文章！