Electron opening every link in browser instead of electron itself - javascript

I wanted to open an external link not in electron but in the browser. Therefore I implemented this code:
document.addEventListener('click', function(event) {
if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
event.preventDefault();
shell.openExternal(event.target.href);
}
});
My problem is now that every link that I create, opens in the browser.
e.g.
foo <-wanted behaviour to open in browser
bar <- not wanted behaviour to open in browser
How can I get it to just open the external link in the browser?

is actually href="http://localhost:X000/#"
so the if condition is always true.
Replace your code with this and it should work:
const { app, shell, BrowserWindow } = require("electron");
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1300,
height: 800,
});
// Load your React app or any other HTML which creates your Electron app content
mainWindow.loadFile("./build/index.html");
mainWindow.webContents.on("new-window", function(event, url) {
event.preventDefault();
// This will open a new Electron window to load the url.
shell.openExternal(url);
});

Related

Prevent new window from closing when main window closes electron?

I'm making an Electron app. This app has a way to open a new window (popup) to be dragged on a different monitor. This window has a way to open another one, and so on. I need the user to be able to close a window he does not want, but keep others open.
I am using target blank when creating the window, but the child window gets closed when the parent is closed.
Second, I tried binding to the new-window event in the main process. This is what I did:
let windows = [];
function createNewWindow(){
let win = new BrowserWindow(
{
width: 1600,
height: 900,
webPreferences: {
nodeIntegration: true
}
}
);
win.webContents.on('new-window', (event, url) => {
event.preventDefault()
let win = createNewWindow();
win.loadURL(url);
event.newGuest = win;
})
windows.push(win);
return win;
}
But the child gets closed when the parent is closed. I checked the windows var, but it is correctly retained in the main process.
How can I open a chain of windows without them being closed when the main parent is closed?

How to know a window closed using javascript from another window/tab?

I have a window example.com/welcome.php.
Using window.open(abcd.php,"mywindow","...") I open abcd.php in new window.
By using window.close() from abcd.php. I close abcd.php. How can I trigger some action in welcome.php when abcd.php closed,
You can use onunload event attached to the opened window;
var w = open('stackoverflow.com');
w.onunload = (ev) => {
console.log('unload', ev);
};
//w.close();
Update
Set unload even inside load event to prevent from unnecessary firing unload on window open, witch happen to me in chrome at least.
var w = open('https://stackoverflow.com/users/8424614/unnamedxaer');
w.onload = () => {
w.onunload = (ev) => {
console.log('unload', ev);
};
};
Update 2
The urls have to be in the same domain to work, otherwise you will get an error when trying to attach event to opened window (w) (set debugger in the line with onunload), they also must be served from same kind of server - not accessed like files when the url in browser looks like this c:/my-site/welcome.php.
Here is working example. Open CodeSandbox's console located at the bottom of the window below the browser section to see output.

Electron ApplicationMenu only works for last window when you have multiple windows

I'm tying to have Multiple windows in my Electron app and each window should have its own applicationMenu. But when I open a new window, the functionalities in application menu such as reload and openDevTools only works for last window that just opened.
Why this is happening?
Code example:
app.on('ready',() => {
createWindow();
});
ipcMain.on('open-new-window',() => {
createWindow();
});
function createWindow() {
const window = new BrowserWindow({
width:900,
height:700,
webPreferences: {
nodeIntegration: true
}
});
window.loadUrl('index.html');
const menu = Menu.buildFromTemplate([{
label: "dev",
submenu: [{
label: "Refresh HTML",
click: () => {
window.reload();
}
}]
}]);
Menu.setApplicationMenu(menu);
}
When i open a new window from ipcMain, the reload() function only works in last opened window. Whether i click "Refresh HTML" in the first window or the second.
You have only one piece of application menu, which (from docs)
will be set as each window's top menu
So, when you overwrite it, this is the expected behavior. Let's say
You create window #1. window variable will refer to #1, thus your application menu will reload that.
You create window #2. window refer to #2 and you overwrite application menu to reload #2 upon click
Clicking on #1's menu will reload #2 anyway
To resolve this, you can reload the current window with BrowserWindow.getFocusedWindow(), this way your MenuItem's function won't depend on the reference of window.
Try
click: () => {
BrowserWindow.getFocusedWindow().reload();
}

How to create app with electron like steam-overlay

I want to create electron application that will be game helper and it will show some cheats top on the any game while user plays. You can imagine like "Steam" application overlay in the game. I tried to open my application to the top and also try to show native dialogs & alerts to get app to top but os always hide game app (minimized) before show my app. My question is; is it possible to run or should i stop to try?
I added example code that i tried below.
import { app, BrowserWindow, globalShortcut, shell, dialog } from 'electron';
import Positioner from 'electron-positioner';
app.on('ready', function () {
mainWindow = new BrowserWindow({
x: mainWindowState.x,
y: mainWindowState.y,
width: mainWindowState.width,
height: mainWindowState.height,
alwaysOnTop: true
});
//...some codes
var ret = globalShortcut.register('shift+ctrl+x', function() {
console.log('shift+ctrl+x is pressed');
shell.beep();
positioner.move('bottomRight');
mainWindow.show();
});
});
It should be working, depend on the game engine and os, i tried the code here on osx and it work as expected.
But want do you mean with "but os always hide game app (minimized) before show my app"
At all you start the app and then the game, and the app should overlay the game

Open a url in Windows Metro App via Javascript

Normally, when I use in my metro application, the url is opening in the default web browser. I don't want to do this with anchor, I want to do the same behavior via Javascript and as async. But I don't know how to open the url with default browser.
Here is my code:
var $aTag = $("<a/>").click(function (event) {
showYesNoDialog(
"Do you approve?",
"The link will be opened in another window. Do you approve?",
"Yes", // Text of yes button
"No", // Text of no button
function () { // Behavior of yes button
// I tried this but nothing happened.
window.location.href = _URL_; // Should open in chrome or default web browser
},
function () { // Behavior of no button
// do nothing
}
);
});
What I also tried is that:
$("<a href='" + _URL_ + "'></a>").click();
But this didn't work, too.
Finally, I found my answer while searching on google.
Open a URL in a new tab (and not a new window) using JavaScript
I used this code to open the url out the metro app and it worked in my situation:
window.open(_URL_, '_blank');
window.focus();
You cannot launch an actual application from within Metro, but what you can do is launch a file with associated program, and that should give you the functionality you need.
Check Sample
The sample covers files and URI's - http://msdn.microsoft.com/library/windows/apps/Hh701476

Categories