如何訪問電子中的DOM元素？

我想在index.html文件功能添加到一個按鈕如下：我在index.html如何訪問電子中的DOM元素？

<button id="auth-button">Authorize</button>

一個按鈕元素在應用程序中的main.js，我有

require('crash-reporter').start(); 
console.log("oh yaeh!"); 
var mainWindow = null; 

app.on('window-all-closed', function(){ 
    if(process.platform != 'darwin'){ 
     app.quit(); 
    } 
}); 

app.on('ready',function(){ 
    mainWindow = new BrowserWindow({width:800, height : 600}); 
    mainWindow.loadUrl('file://' + __dirname + '/index.html'); 

    var authButton = document.getElementById("auth-button"); 
    authButton.addEventListener("click",function(){alert("clicked!");}); 

    mainWindow.openDevTools(); 

    mainWindow.on('closed',function(){ 
     mainWindow = null; 
    }); 
});

但是，一個錯誤發生如下： Uncaught Exception: ReferenceError: document is not defined

在構建電子應用程序時可以訪問DOM對象嗎？或者是否有任何其他方法可以提供所需的功能？

來源

2015-09-25 ant_1618

使用require，只要你願意

守則renderer.jshttps://github.com/electron/electron-api-demos/blob/master/renderer-process/communication/async-msg.js

const ipc = require('electron').ipcRenderer const asyncMsgBtn = document.getElementById('async-msg') asyncMsgBtn.addEventListener('click', function() { ipc.send('asynchronous-message', 'ping') }) ipc.on('asynchronous-reply', function (event, arg) { const message = 'Asynchronous message reply: ${arg}' document.getElementById('async-reply').innerHTML = message })

代碼的主要過程不有權訪問DOM，它是有權訪問的呈現器。 [瞭解區別]（https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md#differences-between-main-process-and-renderer-process） –

你能粘貼您的index.html在這裏 –

DOM可以不是只能在主進程中訪問，只能在其所屬的渲染器中進行訪問。

有一個ipc模塊，可在main process以及renderer process，允許通過同步/異步消息這兩者之間的通信。

您也可以使用remote模塊從渲染器調用主流程API，但沒有任何東西可以讓您以相反的方式執行此操作。

如果您需要在主進程中運行某些內容作爲對用戶操作的響應，請使用ipc模塊調用該函數，然後您可以使用ipc將結果返回給渲染器。

代碼已更新以反映實際（v0.37.8）API，如@Wolfgang在評論中所建議的，請參閱已棄用API的編輯歷史記錄（如果您遇到較舊版本的Electron）。

示例腳本中index.html：

var ipc = require('electron').ipcRenderer; 
var authButton = document.getElementById('auth-button'); 
authButton.addEventListener('click', function(){ 
    ipc.once('actionReply', function(event, response){ 
     processResponse(response); 
    }) 
    ipc.send('invokeAction', 'someData'); 
});

，並在主過程：

var ipc = require('electron').ipcMain; 

ipc.on('invokeAction', function(event, data){ 
    var result = processData(data); 
    event.sender.send('actionReply', result); 
});

來源

2015-09-25 11:29:37 ROAL

當我在index.html中使用require時，出現以下錯誤：' '未捕獲的ReferenceError：require未定義'任何想法爲什麼？ –

你似乎忘了包含錯誤。我目前不能訪問電子，但我認爲'require（）'應該在渲染過程中可用。編輯：好的，現在在這裏。 – ROAL

@ ant_1618您使用的是什麼版本的Electron？另外，在什麼操作系統？ – ROAL

您可以使用webContents.executeJavaScript(code[, userGesture, callback]) API來執行JavaScript代碼。

例如：

mainWindow.loadUrl('file://' + __dirname + '/index.html'); 
mainWindow.webContents.on('did-finish-load',()=>{ 
    let code = `var authButton = document.getElementById("auth-button"); 
      authButton.addEventListener("click",function(){alert("clicked!");});`; 
    mainWindow.webContents.executeJavaScript(code); 
});

來源

2017-02-11 14:16:34 cuixiping

在本https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md

In Electron, we have several ways to communicate between the main process and renderer processes. 
Like ipcRenderer and ipcMain modules for sending messages, and the remote module for RPC style communication.

說這樣你就可以按照https://github.com/electron/electron-api-demos的例子。你應該有一個js文件每個html，在那裏，你可以在htmlhttps://github.com/electron/electron-api-demos/blob/master/sections/communication/ipc.html

<script type="text/javascript"> 
    require('./renderer-process/communication/sync-msg') 
    require('./renderer-process/communication/async-msg') 
    require('./renderer-process/communication/invisible-msg') 
</script>

來源

2017-06-15 08:50:10 onmyway133

如何訪問電子中的DOM元素？

回答

相關問題