<webview id="foo" 
    src="https://www.electronjs.org/zh/docs/latest/api/webview-tag#%E7%A4%BA%E4%BE%8B" 
    style="display:inline-flex; width:750px; height:calc(100vh - 5px)">
</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>

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

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

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

// 刷新頁(yè)面
    const refresh = () => {
      data.webview.reload();
    }

// 上一頁(yè)
    const back = () => {
      data.webview.goBack();
    }

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