electron的webview和內嵌網頁通信的方法

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

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

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

1. 使用 preload 腳本

通過在 webview 標簽中使用 preload 屬性來指定一個腳本，該腳本在網頁加載之前執(zhí)行，但在網頁的 JavaScript 環(huán)境中運行。這允許在不暴露全部 Node.js API 的情況下，向網頁注入特定的 API 或者設置監(jiā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', () => {
  // 從主進程接收消息
  ipcRenderer.on('message-to-webview', (event, data) => {
    console.log(data);
  });
});

【該方法目前遇到問題如下：】
webview內部頁面加載報錯：

2.postMessage

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

當你調用 webviewEl.executeJavaScript 方法時，你實際上是在 webview 內的上下文中執(zhí)行 JavaScript 代碼，因此可以通過注入腳本進行交互。

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

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內的頁面接收：

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內的頁面發(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 內的 window 對象添加 message 事件監(jiān)聽器
      		webviewEl.executeJavaScript(`
     		 window.addEventListener('message', ${handleWebviewMessage.toString()})
    `);
    	};
    	if (webviewEl) {
      		webviewEl.addEventListener('dom-ready', handleDomReady);
   		 }
     // 清理工作
    	return () => {
      	if (webviewEl) {
        	// 移除之前添加的事件監(jiān)聽器，避免內存泄漏
        	webviewEl.removeEventListener('dom-ready', handleDomReady);
      	}
    	};
  	}, []);

知識科普：
executeJavaScript

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

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

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

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

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

● 網頁自動化：可以用它來自動化測試網頁的行為，例如自動填充表單、點擊按鈕等。

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

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

您可能感興趣的文章: