Implications of using multiple interactive popup windows - javascript

I'm coming up with the idea of detaching elements onto popup windows. Make a popup with window.open(), set up some elements in that document and add event listeners to serve the original purpose, but as a popup window component. All of this works, and it seems that the created window is handled by the same thread.
Is this "technique" bug-prone by any chance? I.g: If I create a canvas in the popup window and get a WebGL context from it, will it work flawlessly? If I set a bunch of event listeners there, will I get callbacks from them without any delay?
I couldn't do my research on this one because almost no one does this. Through my life, I've seen many sites use popup windows for user inputs but not for interactive or real timey stuff. I'm building a web app that's complex that utilising multiple monitors would benefit in user experience. You know, at least I know how painful it is to have two monitors and be unable to use both of them because all the component of the app is cramped in a single window. Just imagine using an MDI version of Photoshop where all the toolbox is within the MDI area and you can't get them out of the app window. A web page is exactly that.

Although this is non-conventional it definitely seems to suit the requirement you mentioned. I don't see any issues when it comes to the browser support for handling rendition or communication across the windows, it's just that you will need to be more careful with your code. Something like make frequent checks in case user has closed one of your pop-ups(or register a window close callback so that you can make necessary adjustments).
Eventing across the windows should also be fine. Refer http://help.dottoro.com/ljrwrqew.php which has exactly same example of attaching the event callback from one window to another.
Another good read is http://www.infimum.dk/HTML/JSwindows.html

One possible drawback could be that the popup can be blocked by the browser popup blocker (but yes, you could inform the user to don't block the popup coming from your web application)
Another one could be that the dimensions of the popup that you specify on your javascript code could be not respected (this is at the discretion of the browser), so for example one browser could open anytime the popup in a new tab or a new maximized window.
Here you will find some ready made experiments with multi-window: https://experiments.withgoogle.com/chrome?tag=Multi-Window
For data sharing between your main window and your popup you shouldn't have any problem.
Something to keep in mind is that not every browser use the same threading model, so you must do some performance tests as well on all the browser you will want to support and see the differences.

Related

Can I reliably detect whether a web page can be seen by a user?

I am trying to decide whether to do a somewhat expensive javascript-ajaxing-to-the-server operation, but it is only worth doing if the user can see the web page, so I'm trying to detect that.
I was initially excited to find the "visibilitychange" API, but it looks like that only detects if the web page is in a hidden tab. If the user opens up a new browser window instead of a new tab, the event isn't called. Nor is it called when the user changes to a different app.
I also think I'd like to slow down the operation if the browser isn't in the foreground, so there are really three states:
"request-every-5-seconds" Does the browser have the input focus?
"request-every-minute" Is any part of the page actually on the user's display?
"don't-request" the browser is buried under another window.
That way, a user who goes to my webpage and leaves the browser open won't be using resources either on the server or their computer.
For the first state monitoring "onfocus" mostly works, but the focus can get lost to the developer tools. That's a little annoying, but it isn't typical of a customer, so I can live with that.
For the second state, I have no idea where to start. One idea I had was to detect whether the browser is actually "painting", but I haven't found any way to detect that.
How do you decide whether it is worth checking for updates?
[note: I'm using jQuery already, so a jQuery-based answer is fine.]
Thanks.

How do I prevent browsers from blocking the pop-up window that I've created?

I created a simple JavaScript function to display my pop-up window once it loads. But it keeps on being blocked by Firefox and Google Chrome and I have to somehow enable it on the Firefox and Chrome to display the pop-up.
Are there any alternatives for this?
I have a player on the pop-up window so I have to use a pop-up to let the player play automatically. The problem is that if I put it on the page itself, once the user clicks another page the entire page reloads and the player automatically stops for a few seconds until the whole page reloads and I have to prevent this from happening.
The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.
Please take a look at dthorpe's answer here. It covers your question.
You could try putting the player on the original page, and using something like History.js to control page changes (you could have the main page body in one wrapper div that changes, and leave the player outside of it).
Otherwise, you could try (assuming you meant a HTML5 <video> or <audio> player) downloading the data to localStorage/cookie/[other persistent storage mechanism] and have it seek everytime you change a page.
It will be hard to stop browsers from blocking your pop up window, because any way to do so is inherently exploitable; however, if you call the function to open another window from an onclick event, you may be able to circumvent some popup blockers. Also, some popup blockers allow popups when using the https protocol, although not many have this feature, and https can be hard to implement for the average website, if you don't have physical access to the server.
One other option is to open the other page in another tab (like this w3c example; you can 'click' the link with javascript).
You might also want to look at this post, as it is somewhat similar.
I only just discovered you asked this question.
Here's the answer in full.
Basically, you can simply create the popup immediately as the user event is fired, then fill it with content (your player, for instance) as you have it available.

Is there any way to detect popup close for a Chrome Extension before the popup is closed?

I know that one can use ports to detect popup close. However, this doesn't work when there is information on the popup that I wish to persist.
For this extension I need to be able to save the textarea contents to sync storage when the popup is closed. There already is an update button which manages this, but no way to temporarily halt and save the status if the popup gets (accidentally) closed.
One way to do this is to keep storing the content on keypress, but I'd rather not hit the storage so often (especially since it's connected to some other event handlers).
Is there any way I can mimic onbeforeunload for a popup without being too heavy on the I/O?
All extension pages (background page, browser action popups, etc.) share the same process and get direct script access to each other via chrome.extension.getBackgroundPage / chrome.extension.getViews, so one thing you could try is having an onbeforeunload event in your popup which grabs a handle to the background page and passes over any javascript data to the background page, and then have it do the serialization. You can even hand over a chunk of DOM by using document.adoptNode.
In general though we encourage more of a "save as you go after a few seconds of user idle" approach to writing extensions and apps, because your code can unexpectedly stop running for lots of reasons (entire browser or OS crash, loss of power, etc.). Obviously this is harder in cases where you have a big data structure to save, because you then have to start looking at how to do incremental save, etc.
Use localStorage to save the data and setPopup to save the page see here Keep a chrome extension popup after close it

In Javascript, how to reuse a window previously opened by another page

I have a window which uses javascript to open another child window, in the standard window.open("http://foobar","name") manner. If I open again with the same name, it reuses the window. This is great and exactly what I want.
However, if the original window is closed, I would like to be able to reopen it and have its window.open go to the previously opened child window. Unfortunately, because it is a new parent window it will open another child window (which it will happily and correctly reuse).
Does anybody here know of a way to get hold of that previous child window so I can avoid making more windows than necessary?
Behind the scenes, the driver of this question is this: I have a java program which will periodically open different websites and I do not want to force a plethora of tabs or windows. Command-line options do not let you reuse windows or declare targets; javascript lets you declare a target. I figured I would write a small javascript page which opened a page in a specifically-named window and then close itself. Anytime you want to see a new page, hit that page passing in your new page.... Much to my dismay, though, targets seem specific to the window which creates them.
So if you have ideas which are relevant to my actual problem I'm interested too.
Embedding a browser took less time than trying various ways of controlling browsers.

Maximizing the current window in javascript

Is there a way I can maximize a currently minimized window from Javascript? Here's my situation:
I have a series of links that all target the same external window (e.g. "MyNewWindow"). When I click a link, a new window pops up. If I click another link, the page pops up in the same window as expected. If I minimize the "MyNewWindow" popup, I'd like to be able to click another link and have that window maximize.
My approach was to put something on the onLoad part of the body so that when the page is refreshed it will automatically "maximize" if it is minimized. Note: Using window.MoveTo() and window.resizeTo() doesnt seem to do the trick (the window stays minimized).
Thanks!
For all of you know-it-alls, there are perfectly good reasons to want to know how to do this. Here's the reason I needed this:
I'm deploying SCORM modules to a variety of Learning Management Systems (LMSs)
One LMS that a client is using launches the module in a small (600x400) window, with the user controls to maximize or resize said window DISABLED
The client doesn't know how to change this launch behavior
My only option is to try to maximize via javascript, because the idiots who made the LMS took away the user's ability to manage their own windows.
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
This may not work in IE depending on the security zone your page is falling under, and it may not work in Chrome at all. But for a corporate environment in an intranet, it has a good chance of working.
Don't do this, you are not allowed to do this by most modern browsers for a reason.
In a tabbed environment you're not messing with only the window you may have created, but all of my tabs, that's unacceptable. It's the user's computer, user's browser, it's the user who chose to go to your site...let them size the window the way they want it, doing anything else breaks their experience...and their trust in your site.
The behavior you're looking to emulate is what your run-of-the-mill malware does...re-think your approach, please. For example focusing that window is appropriate for what you want, let the default behavior of the browser take over from there, like this:
var thatWindow = window.open(url, "linkWindow");
thatWindow.focus();
try to use window.open(url,fullscreen=yes);
if you out fullscreen=yes than while clinking on link automatically

Categories