電子内でDOMを操作する

電子アプリケーション内でDOMを操作するにはどうすればよいですか？電子内でDOMを操作する

、私はいくつかの結果から来（PROCのレンダリング）

マイアプリはとてもシンプルですが、私はちょうどコンソールのようにウェブを使用したいとのメッセージを示す運でIPCを使用してドキュメントやwebcontentsからいくつかのチュートリアルを作りました同期関数（メインプロシージャ）

私は実際のコードで質問を更新しました。

私は（私が思う）を参照し、テストに、よりシンプルな方が簡単な、別のコードを配置するつもりです、実際のコードと作品である（しかし、私が望むようにしない）

私は電子が唯一の書き込みを起動すると最後のメッセージ。 [OK]を、レスポンスは本当に速いですし、私は大文字の機能を作るためには長い

index.js

をとり、最初のmesssageが表示されないかもしれないが、私はあまりにも（）ループ用のsetTimeoutと大きなを置くことを破棄します

const electron = require('electron'); 
const {app} = electron; 
const {BrowserWindow} = electron; 
const ipc = require('electron').ipcMain 

app.on('ready',() => { 
    let win = new BrowserWindow({width: 800, height: 500}); 

    win.loadURL('file://' + __dirname + '/index.html'); 

    // Emitted when the window is closed. 
    win.on('closed',() => { 
    win = null; 
    }); 

    // Event that return the arg in uppercase 
    ipc.on('uppercase', function (event, arg) { 
    event.returnValue = arg.toUpperCase() 
    }) 
});

index.htmlを

<html> 
    <body> 
     <div id="konsole">...</div> 

     <script> 
     const ipc = require('electron').ipcRenderer 
     const konsole = document.getElementById('konsole') 

     // Functions 
     let reply, message 

     // First MSG 
     reply = ipc.sendSync('uppercase', 'Hi, I'm the first msg') 
     message = `Uppercase message reply: ${reply}` 
     document.getElementById('konsole').innerHTML = message 

     // Second MSG 
     reply = ipc.sendSync('uppercase', 'Hi, I'm the second msg') 
     message = `Uppercase message reply: ${reply}` 
     document.getElementById('konsole').innerHTML = message 
     </script> 
    </body> 
</html>

出典

2016-07-28 Francis Vega

"結果" は、参照型の値です。 result = funcC（）または他のときは常に "結果"が値になります。これを試してみてください：

$('#msg').text(result.ToString());

出典

2016-07-28 11:34:50

あなたがwebContentsとIPCを使用して葉エンドとバックエンドの間でcomminicateすることができます。次に、バックエンドの指示文でフロントエンドでコードを操作することができます。

インスタンス（バックエンドからフロントエンド）;

あなたのmain.jsがあなたのフロントエンドにメッセージを送信しています。

mainwindow.webContents.send('foo', 'do something for me');

あなたのフロントエンドはここでそのメッセージを歓迎します。インスタンス（バックエンドにフロントエンド）について

const {ipcRenderer} = require('electron'); 

ipcRenderer.on('foo', (event, data) => { 
     alert(data); // prints 'do something for me' 
});

。

あなたのfrond-end;

const {ipcRenderer} = require('electron'); 

ipcRenderer.send('bar',"I did something for you");

あなたのバックエンド。

const {ipcMain} = require('electron'); 

ipcMain.on('bar', (event, arg) => { 
    console.log(arg) // prints "I did something for you" 
    event.sender.send('foo', 'done') // You can also send a message like that 
})

質問の更新後の更新。

私のローカルであなたのコードを試しました、それは働いているようです。

「innerHTML」の代わりにinsertAdjacentHTMLで試してみてください。console.logを確認してください。

このように、

document.getElementById('konsole').insertAdjacentHTML('beforeend',message);

出典

2016-07-29 08:53:36 utkuDAT

それは私がイベントを手動で起動した場合、私は機能のsecuenceを入れた場合は、最後の機能は、中間にメッセージを失って、終了したときに、メインプロセスはレンダラープロセスに制御を与えるだけで動作します。 –

@FrancisVega私は私の答えを更新しました。 – utkuDAT

動作しません。：S これを表示するためにgifを記録しました。私はtemrinal console.logの行動を電子DOMにステップバイステップで欲しい。注：処理時間をシミュレートするために大きなfor（）ループを配置しました。 https://drive.google.com/file/d/0B9FZG4S1yT5wNk04ajNHQTZ4RTQ/view –

電子内でDOMを操作する

答えて

関連する問題