I am creating a electron application that looks similar to google chrome with multiple dynamic tabs for different pages. The application also supports multiple open windows. I want to be able to drag tabs between these windows. I already know how to send messages between my windows with the ipcRenderer but I am coming up against a few roadblocks:
1) I cannot drag an html element outside of a window. How can I drag the tab (or something that looks identical) outside of the window?
I've found a discussion on the atom forums where someone claimed they were able to achieve this, but do not elaborate on how. They claim "Native HTML5 Drag and Drop in combination with IPC messaging was the solution". Someone else links a GitHub example below, but the example has since been removed.
2) How do I detect when a tab is dragged onto another open window (Mouse released on other window)?
Again the discussion suggests I use IPC messaging to do this, but I have not found a way to get the id of the window you release the mouse on.
Edit:
I have found a solution to issue 1. The mentioned discussion was right and using default HTML5 dragging behavior was able to create the effect I wanted. Issue 2 still stumps me. I understand the concept of alerting all other open windows with an IPC message to prepare for an incoming drag but I am still unsure how to get the id of the window and the position you dragged to on it so you can send the tab information to the correct place.
I know this is a bit old. but instead of dragging a tab to a new window, what about a context menu on the tab with a [Send to window].
using React for example (not that you'd have to), you could JSON.stringify the data you've used to render the tab, send it to the child window, JSON.parse it and render it in a new tab on the child window.
Not quite the effect of dragging but the same end result.
For communication between windows:
https://medium.com/#kahlil/how-to-communicate-between-two-electron-windows-166fdbcdc469
Related
is it possible return focus on tab parent using javascript?
I read some threads about this problem, but i didn't find solutions.
I tried
window.opener.parent.focus()
and
window.opener.focus();
but it doesn't work.
Can someone help me?
Thanks
Generally, you cannot do this inside a web page. Because it's the user's choice which tab/window she wants to focus on and browsers such as firefox and chrome respect such choices by providing configs to open new tabs in the background or not. But under several very special cases, you may still achieve this.
If you want to open a new tab and return focus immediately, you can try to simulate a 'ctrl+click' event on a link to open the tab on the background. Refer to this thread Open a new tab in the background?(Only for chrome, API may already changed. So it may only works on an obsoleted version)
If you are shipping with an extension, do it in the extension code. For example: in chrome extension.
If your script is for a customized browsers which you have control on / you can affect the design, you can implement the function in the browser side and expose an API for your script.
I want to create elements which (when clicked) will guide visitors towards two differenct websites (both in new windows). How can I do this? Below are the two ways which I tried, which both do not work as only one page/ window is opened. Thanks in advance!
Timo
The solution as suggested here: How to make a link open multiple pages when clicked . But maybe the solution is outdated, but for me only the first webpage is openend (with all the indicated solutions. (for example the code which is suggested there)
HTML Click Here
$('a.yourlink').click(function(e) {
e.preventDefault();
window.open('https://www.youtube.com/watch?v=H9XIXFwpyEc');
window.open('https://stackoverflow.com/search?q=open+multiple+pages');
});
While both using a class and an id with both a different a href and both with the extra options of opening new window also does not work as it only opens the first window
HTML Click Here
$('.yourlink').html(''); // Add page
$('.yourlink a').attr('target', '_blank');// Make sure it opens in new window
$('#extra').html(''); // Add page
$('#extra a').attr('target', '_blank');// Make sure it opens in new window
Using Chrome, I'm not seeing the problem you describe. But when I tested it in IE, I suddenly got a "popup blocked" message.
It's not strange though. I'd hate it if a single click on a link could suddenly spawn 10 new windows. In this scenario I actually think IE handles it better (by blocking the second window).
The thing is that window.open will only work if the action that invokes it is a trusted event. That usually means a user-initiated event, like click. But what Chrome doesn't account for (I assume) is that a single trusted event can then invoke several window.open.
I've tried to work around this feature, but have not (yet) been able to fool IE. The options, as I see it, are:
Ask users to add your site to the popup exceptions (internet settings).
Spawn the pages in iframes within your own site
Ask users to use another browser ;)
Or the obvious:
Use separate links for the windows
I am stuck with a little problem from few days now.
There is some solution over internet but they don’t match what I need.
I’m on a Spring web application, using flex. For some reasons I need to load a new windows (or tab) in background.
For now I manage to write some JavaScript script that put the focus on the main window when the child one is created but when the main window get the focus back it select the whole text and so the user loose all his work.
It’s why the new window MUST NOT take the focus at any time.
I also tried to create a link and simulate the middle click on it so the tab is created in background, but it only work on Chrome, beside I see that on Internet Explorer the tab is sometime created in background sometime in foreground (even if the setting option: “Always switch to new tabs when they are created” is NOT setted on, i must miss something).
Of course like in a lot of company the main browser is IE, so the solution must work for it, i can specify some setting to make the thing work as every user get the same env.
i've also tried to set the registry to make no application take focus but on 7 or 2008 RT it's not really usefull.
I’m looking for a solution in javascript, flex/AS or even html to create that tab without interrupting the user. If the main window loose the focus 1 sec but I manage to not select the whole text in flex it will be good too.
Thanks in advance.
I'm developing a web based game using processing.js, my question relates to pure javascript code to manage browser windows.
The game is a maze of small browser windows (200px*200px) each border can be a wall or a passage to another window. My issue is that if I close the window I'm coming from then I try to get back it doesn't re-open, even if I use the same function that was used before.
I've got a git repo running here : GitHub - TheMidst.
If you want to reproduce the "error" :
Pull the code from github:
launch index.html (in your favorite browser, I use chrome).
Don't wait up and click the start button -> level0.html opens.
Go on the right by clicking on the right hand side of the canvas->
level1.html opens.
Go back on your steps -> level0.html still opens.
Go back on the right towards level1.html and it will not be re spawn
... => this is my issue.
/js -> contains a windowScripts.js that handles opening and closing of windows through functions, this is the heart of my window manager and it's buggy.
/levels -> contains each level as a html page.
/pd -> contains the sound of the game as Pure-Data patches (yeah !)
The game is far from finished yet, so everything is far from perfect. Any help would be greatly appreciated.
Cheers.
edited to add some code
to open a popup i use : popUp(1); //1 being the number of the level i want to open.
this relates to this js function
function popUp(winNum) {
var windowFeatures = "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,left="+(winVars[winNum][0])+",top="+(winVars[winNum][1])+",width="+winVars[winNum][2]+",height="+winVars[winNum][3];
windows[winNum] = window.open( "level"+winNum+".html", "myWindow"+winNum, windowFeatures);
windows[winNum].moveTo(winVars[winNum][0],winVars[winNum][1]);
}
all my windows properties are stored in arrays
to close a window I use : closeWindows(0); // 0 being the number of the window I want to close.
function closeWindows(winNum2){
setTimeout (widows[winNum2] = window.close(),50);
}
Actually I had a bit of confusion beetween parent windows etc...
using "window.opener.popUp(myPopup)" did fix the issues
some changes have been made on the github repo, if you have the same issue you can still refer to the github repo.
Cheers
As a general rule, using multiple browser windows is a Bad Idea, because it's exactly the same interface that all sorts of browser malware uses, such as pop-ups and pop-unders. It's entirely possible that's why you're getting the behavior you're seeing, in fact.
Instead, since you want multiple tiles, just use absolutely positioned div elements.
I'm working on an app, which is based on Firefox and what I need to build is an in-app password manager. I'm planning to populate it once and hide it from view outside of the window frame, bringing it in-frame when it is needed. Now, I have read about the rules applied to moveTo, namely
"You can't move a window or tab that wasn’t created by window.open.
You can't move a window or tab when it’s in a window with more than one tab."
I was wondering if there are any exceptions to that rule? I have full access to chrome, so I was wondering if there's some more low-level way to achieve the moveTo form there?
Thanks a lot!
The restrictions of window.moveTo() don't apply to code running with system privileges. I just tried typing top.moveTo(-1000, 0) into the Error Console - it moved the window off-screen, something that unprivileged code isn't allowed to do. Still, opening the window off-screen is not possible as far as I know (you can however move it in a load event handler, when the window is still invisible). Also, the task manager still shows that window - it is possible to Alt-Tab to it, then press Alt-Space and choose "Move" from that system menu (that's on Windows).