快捷導(dǎo)航

electron的webview和內(nèi)嵌網(wǎng)頁通信的方法

更新時(shí)間：2024年04月15日 10:56:18 作者：yezi__626

在 Electron 的世界里,webview 標(biāo)簽相當(dāng)于一個(gè)小盒子,里面可以裝一個(gè)完整的網(wǎng)頁,就像一個(gè)迷你瀏覽器,這篇文章主要介紹了electron的webview和內(nèi)嵌網(wǎng)頁如何通信,需要的朋友可以參考下

在 Electron 的世界里，webview 標(biāo)簽相當(dāng)于一個(gè)小盒子，里面可以裝一個(gè)完整的網(wǎng)頁，就像一個(gè)迷你瀏覽器。當(dāng)你想和這個(gè)小盒子里的內(nèi)容說話時(shí)（也就是進(jìn)行通信），這里有幾個(gè)方法可以幫你做到：
這里只寫了兩種方式，如果要是來找方案的客官。那直接看2就好。

1. 使用 preload 腳本

通過在 webview 標(biāo)簽中使用 preload 屬性來指定一個(gè)腳本，該腳本在網(wǎng)頁加載之前執(zhí)行，但在網(wǎng)頁的 JavaScript 環(huán)境中運(yùn)行。這允許在不暴露全部 Node.js API 的情況下，向網(wǎng)頁注入特定的 API 或者設(shè)置監(jiān)聽函數(shù)來實(shí)現(xiàn)雙向通信。

<webview id="foo" src="http://example.com" preload="path/to/preload.js"></webview>

在 preload 腳本中，你可以使用 ipcRenderer 和 contextBridge 來安全地暴露功能：

const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
    sendMessage: (message) => ipcRenderer.send('message-from-webview', message)
});
window.addEventListener('DOMContentLoaded', () => {
  // 從主進(jìn)程接收消息
  ipcRenderer.on('message-to-webview', (event, data) => {
    console.log(data);
  });
});

【該方法目前遇到問題如下：】
webview內(nèi)部頁面加載報(bào)錯(cuò)：

2.postMessage

由于webview 標(biāo)簽創(chuàng)建了一個(gè)獨(dú)立的渲染進(jìn)程，它和主應(yīng)用的渲染進(jìn)程是隔離的。因此，webview 內(nèi)部的頁面擁有自己的全局 window 對(duì)象，你不能直接從外部的渲染進(jìn)程訪問 webview 內(nèi)的 window 對(duì)象。

當(dāng)你調(diào)用 webviewEl.executeJavaScript 方法時(shí)，你實(shí)際上是在 webview 內(nèi)的上下文中執(zhí)行 JavaScript 代碼，因此可以通過注入腳本進(jìn)行交互。

(1)electron的App.tsx模塊發(fā)消息給webview內(nèi)的頁面：

const handleSendMessage = () => {
    if (webview.current) {
      const message = { type: 'messageFromElectron', text: '這里是electron發(fā)送的消息：electron->view' };
      const script = `window.postMessage(${JSON.stringify(message)}, '*')`;
      webview.current.executeJavaScript(script);
    }
  };

在webview內(nèi)的頁面接收：

mounted(){
  const handleWebviewMessage = (event) => {
    const message = event.data;
    if (typeof message === 'object' && message !== null) {
      switch (message.type) {
        case 'messageFromElectron':
          console.info('Electron的消息', message);
          break;
        default:
          console.warn('接收到未知類型的消息', message);
      }
    }
  };
  window.addEventListener('message',handleWebviewMessage); 
},

（2）webview內(nèi)的頁面發(fā)送消息給electron

 sendMessageToElectron(){
      window.postMessage({ type: 'messageFromView', text: 'Hello from Vue!' }, '*');
    },

electron的App.tsx接收：

const handleWebviewMessage = (event) => {
    const message = event.data;
    if (typeof message === 'object' && message !== null) {
      switch (message.type) {
        case 'messageFromView':
          console.info('這里是webview的消息:webview->electron', message);
          break;
        default:
          console.warn('接收到未知類型的消息', message);
      }
    }
  };
    useEffect(() => {
    	const webviewEl = webview.current;
   		const handleDomReady = () => {
      		// 為 webview 內(nèi)的 window 對(duì)象添加 message 事件監(jiān)聽器
      		webviewEl.executeJavaScript(`
     		 window.addEventListener('message', ${handleWebviewMessage.toString()})
    `);
    	};
    	if (webviewEl) {
      		webviewEl.addEventListener('dom-ready', handleDomReady);
   		 }
     // 清理工作
    	return () => {
      	if (webviewEl) {
        	// 移除之前添加的事件監(jiān)聽器，避免內(nèi)存泄漏
        	webviewEl.removeEventListener('dom-ready', handleDomReady);
      	}
    	};
  	}, []);

知識(shí)科普：
executeJavaScript

executeJavaScript 方法的主要作用是在瀏覽器環(huán)境中異步執(zhí)行 JavaScript 代碼。這個(gè)方法是 Electron 中
webContents 對(duì)象提供的一個(gè)功能，允許開發(fā)者在 web 頁面的上下文中運(yùn)行任意的 JavaScript 代碼字符串。

由于我使用的是react框架的ref來引用webview組件的，因此需要通過這個(gè)引用來獲取 webview 的 webContents，進(jìn)而使用 executeJavaScript 方法。
使用場(chǎng)景：
● 與頁面交互：你可以使用 executeJavaScript 來注入和執(zhí)行自定義腳本，從而與網(wǎng)頁中的 DOM 進(jìn)行交互，修改網(wǎng)頁內(nèi)容，或者觸發(fā)在網(wǎng)頁中定義的 JavaScript 函數(shù)。

webview.executeJavaScript('document.getElementById("myButton").click()');

● 獲取頁面信息：通過執(zhí)行返回值的 JavaScript 代碼，你可以獲取網(wǎng)頁中的數(shù)據(jù)，比如頁面標(biāo)題、選定的文本或其他 DOM 元素的屬性。

webview.executeJavaScript('document.title')
  .then(title => {
    console.log(`The page title is ${title}`);
  });

● 網(wǎng)頁自動(dòng)化：可以用它來自動(dòng)化測(cè)試網(wǎng)頁的行為，例如自動(dòng)填充表單、點(diǎn)擊按鈕等。

webview.executeJavaScript(`
  document.getElementById('username').value = 'exampleUser';
  document.getElementById('password').value = 'examplePass';
  document.getElementById('login-form').submit();
`);

到此這篇關(guān)于electron的webview和內(nèi)嵌網(wǎng)頁通信的方法的文章就介紹到這了,更多相關(guān)electron webview通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: