Atom Electron webview contextmenu、クリックターゲットを取得

Question

私は新しいプロジェクトに取り組んでいます。ユーザーのデスクトップアプリケーションを作成したいと思います。私はAtom Electronフレームワークを選択します。

問題は、webview要素にカスタムコンテキストメニュが必要なことです。

これまでのところ、私はwebviewでコンテキストメニュを作成することができますが、クリックの「下」のコンテンツにはアクセスできません。 :)

のindex.html：右クリックが発生したときに

<webview id="webViewDefault" class="active" src="http://example.com" minwidth="100%" minheight="100%" partition="somePartition" nodeintegration allowpopups></webview> 

renderer.js

const electron = require('electron'); 
    const Menu = electron.remote.Menu; 

//Create contextmenu template 
    const WebViewMenu = Menu.buildFromTemplate([{ 
     label: 'Button 1', click(){ 
      console.log('Button 1 clicked'); 
     } 
    }, 
     {type: 'separator'}, { 
      label: 'Button 2', click(){ 
       console.log('Button 2 clicked'); 
      } 
     } 
    ]); 

//get webview 
    let defaultWebview = document.getElementById("webViewDefault"); 

//add event listner 
    defaultWebview.addEventListener("contextmenu", (event) => { 
     const t = event.srcElement.id.split('-'); 
     WebViewMenu.popup(electron.remote.getCurrentWindow()); 
    }); 

は、どのように私は、例えば、リンクのhref属性を取得することができますので、私は新しいを作成することができますタブをクリックします。私はただのリンクから、URLを取得する必要があります

タブなど、アクティブなものを選択し、新しいwebviewsを作成し、偉大な作業している...：D事前に助けを

ありがとう！

Answer 1

グローバルステートストアに必要な情報を保存し、コンテキストメニューのclickイベントからアクセスします。例

// Instantiate a Global Store 
const globalStore = { 
    eventTargetHref = null 
} 

// Set value inside your DOM node event listener 
aDOMnode.addEventListener('contextmenu', (event) => { 
    event.preventDefault() 
    globalStore.eventTargetHref = event.target.href 
    aContextMenu.popup(remote.getCurrentWindow()) 
} 

// Access value from your context menu click event 
aContextMenu.append(new MenuItem({ 
    label: 'Open In New Tab', 
    click() { 
    addNewTab(globalStore.eventTargetHref) 
    }, 
})) 

については

Answer 2

私はそれを理解したので、私は私の質問に答えるつもりです。

私の解決方法は、webviewのpreload属性です。ロード時にwebviewに注入される* .jsファイルを作成しました。このファイルには、クリックイベントのイベントリスナーが含まれており、電子メール内の「ipcRenderer」を介してイベントターゲットに基づいて「ipc」メッセージをメインウィンドウに送信します。

私は例えば、異なるelemntsごとに異なるcontextmenusを作成することができますこの方法：...、入力、テキストエリアなど

注入JS：私は私のカスタムIPCのために聞くのWebViewの親ウィンドウで

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

document.addEventListener('contextmenu', function (e) { 
    e = e || window.event; 
    let msg = { 
      tagName: e.target.tagName || e.srcElement.tagName, 
      text: e.target.textContent || text.innerText, 
      href: e.target.getAttribute("href") 
     }; 

    if (msg.tagName.toLowerCase() === 'a' && msg.href.substring(0, 1) !== "#") { 
     ipcRenderer.send("webview-context-link", msg); 
    } 
}, false); 

は、必要に応じてメッセージとそれらを扱う：

const electron = require('electron'), 
     Menu = electron.remote.Menu, 
     ipc = electron.ipcRenderer; 

electron.remote.ipcMain.on("webview-context-link", (event, data) => { 
    if (url = validateUrl(data.href)) { 
     const WebViewMenu = Menu.buildFromTemplate([{ 
      label: 'Open in new tab', click(){ 
       addNewTab(url) 
      } 
     }]); 

     WebViewMenu.popup(electron.remote.getCurrentWindow()); 
    } 
}); 

を、私は、これは、この問題を解決するための最も素晴らしい方法である100％わからないんだけど、時間のために私が出てくるならば、それはより良いソリューで動作しています私はこれを編集します。