periodically reload tab and bring to front - javascript

I have a requirement where a few users are required to keep a watch over a dashboard browser page.
My first thought was use some javascript magic that reloads the page, switches to it if it is not active and being the browser window to front. I quickly realized how difficult this (accept for reload) is and that browsers do everything possible to prevent it, with good reason.
On the other hand, I have err, seen some "websites" which show a pop-up telling me that my browser is affected and I need to call the given 800 number. These pop-ups are pretty much impossible to kill. I could use that if I knew how.
I have also considered utilities like ergociser which sit in the taskbar and open a browser window periodically. This could work but it opens a new pop-up window every time, while I am keen to reload it in the same window.
The closest I have come so far is to use alert which does not bring the window to front but it does flash the taskbar.
I am thinking of a chrome extension or firefox add-on that brings named pop-up tab. But I am open to any other ideas. It can be a browser specific solution, and it is ok to require white-listing in pop-up blockers
What is a best way to do this?
UPDATE
There are two close votes for "Too Broad". It is true that I am looking for the right technology to use for this problem, so I cannot refine it with technology-specific details. But short of that, appreciate if someone can give suggestion for narrowing down the problem statement.

Related

getUserMedia permission dialog disappears in FireFox

When I access getUserMedia, a permission dialog pops up and my website waits until the user either accepts or blocks the request. That part works in Chrome 47.
However, in FireFox 43, (at least), when the dialog is visible, the user can click anywhere else and it will disappear and getUserMedia's callback will never be invoked. Then the user can't give permission and my site is stuck waiting. And it is pretty easy to click somewhere else, too, so I'm anticipating lots of "the microphone doesn't work" support calls.
(That seems like a bug in FireFox to me, since Chrome keeps the dialog visible until the user clicks it.) But anyway, is there a work around?
For instance, is there a way to detect whether the permission dialog is currently visible?
Or is there a way to re-summon that dialog in javascript by using a setTimeout?
Does anyone have another suggestion about how to make this user experience better?
The only thing I can think of is to put up a message something to the effect of, "Waiting for permission to use the microphone. If you don't see a permission dialog please refresh this page." There must be something better than that.
Thanks!
The permission dialog is merely minimized. Click on the gray microphone (or camera) icon that the dialog hung off, which is still there in the URL bar, and the dialog grows back and can be answered.
It is not a bug, as it was designed to be less intrusive than Chrome, to not let sites keep users hostage, so to speak, until they give up permissions, but the behavior does seem to confuse a lot of people. See https://bugzil.la/1004055.
There is no surefire way to detect whether the permission dialog is currently visible, though if you detect a mouseclick anywhere on the page, and you have not gotten a response, then chances are it is not.
One workaround is to issue another getUserMedia call (through setTimeout or otherwise). It should not crash. If it does then please file a bug.
Another workaround is to programmatically refresh the page, using location.refresh().
If your site is not designed to work without a microphone, or you detect a user-action that suggests the user is stuck, then maybe something like "Waiting for permission to use the microphone. Please click the microphone icon in the URL bar to summon the permission dialog if it is not visible."

Is there any way to programmatically bring a browser tab to front (cross-browser)?

I want my website's browser tab to be brought to front, when it is referenced by a hyperlink, regardless of any browser setting that may forbid this behaviour. I am aware that this is potentially a bad (or at least annoying) thing, however, my users are not allowed to change their browser settings (due to company policy) and are confused that apparently nothing happens, when they hit a hyperlink that references my website (although the existing tab is correctly updated of course but remains in the background).
There is one more constraint: Closing and reopening the tab is not an option, it must remain open as most hyperlinks will just add an anchor to the existing url which does not require a reload of the website.
I am open to any virtuosic HMTL or JavaScript tricks if there are any ;-)
Not sure this is something you can do with HTML/JS as you are trying to change the user's browser behaviour not your website's.
I'm still confuse by that :
...nothing happens, when they hit a hyperlink that references my website
(although the existing tab is correctly updated of course but remains
in the background).
Isn't it a normal browser behaviour with which people using the Internet are used to ?

window.open() in IE 9

when i try to
window.open()
in IE 9 , it opens it with favorites sidebar (if it was present in parent window) this is behaviour unique to IE , and it breaks dialog windows as I envisioned them. Any hope to fix that?
Since you specified that you're using this for a dialog, I feel I should discourage this. Using window.open() is not ideal for creating dialog boxes.
Some browsers will ignore your 'new window' request, and open it as a new tab. This can be configured by the browser user, so is out of your control.
If the user has toolbars and side panels open, there's a strong likelyhood of them showing up in the new window, which will mangle your layout. Again, you'll need to test this in every browser, and even then you can't be sure without knowing all the config options that might affect it.
Opening a new window does not give you a modal dialog box. You can't prevent the user from clicking back to the parent window and ignoring the dialog box.
Therefore, if you want to make a dialog box, you would be much better off using a javascript library that opens a box inside the current page. It's much more flexible, and gives you much more control over the end result than window.open().
If you're using JQuery, you might want to start by looking here: http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/, but there are stacks of others available (it's a very easy thing to write, especially in JQuery, so there's plenty of plugins out there you can try till you find one which is perfect for you)
Try changing it to window.location.href= 'url + target="_blank"'

Creating new tab / switching between Tabs in Firefox?

I am looking for a way to improve the workflow in a PHP based CMS. There is a lot of switching between the editor mode and the preview mode of the page. The editor mode is huge to load, and so I would like to open the preview mode in a different window.
I don't want to use new windows or an iframe within the current window to keep the workflow simple and to avoid confusion.
Is there a way to explicitly open a new tab (not window), and to jump to that tab from a document, in Firefox? The number of users is limited, so there is the possibility to set up the client with the necessary extensions / permissions.
I know Firefox can be forced to open all links in tabs, but I think that won't cut it, as I still can't address and focus the newly opened window.
Thanks for all the great answers everyone. I have now enough material to decide whether I'll take the greasemonkey approach, rely on the user to set up "open in tabs" and address the window by name, or use a "inline" HTML solution as so many of you suggested. I am accepting the answer that I feel went most effort into.
There is no way to force a window to open as a tab. It's all dependent on the user's preference settings.
I second the answers that say you should do this in HTML using Javascript. Then it can work in all browsers that support JS.
I would put two divs on the page and show/hide each div depending on which tab is selected. If you are clever about this you could trap the click on the tab and determine if the user left-clicked or middle-clicked. If they left click you load that tab on the page. If they middle-click you let the browser open a new tab/window (according to the user's prefs, don't try to force it), and leave the current window unchanged (that is, don't switch to the new tab). The action for clicking on the tab would be to use AJAX to load the contents of the remote document and put it into the tab. Use Javascript to modify the URL before submitting the AJAX request so that the server knows to send a web page fragment instead of the whole page.
The advantage of this dual-natured solution is that the tabbed approach will work the way you want it to work for the majority of cases, but for users with, say, two screens, or who prefer switching between browser tabs, they will still have the flexibility to work in multi-window mode. This can all be done without any browser extensions and it should work equally well in IE as well as Firefox, Opera, etc. Avoid locking yourself into one browser, even one as excellent as Firefox. One day a customer will need to use Opera or Safari and you'll be stuck.
You say you don't want to use an iframe to avoid confusion. Now I don't know about the layout of your website, but I've been using the approach that the editor opens in its own div right next to the content being edited and the content is being live updated as you edit. No need to change tabs.
(If the window is too narrow there are HTML tabs Edit and Preview)
It does not seem to add confusion to the user and for me this approach works really well. Maybe it's worth considering in your case.
What about using iframes and JavaScript?
I know you said you want to avoid 'confusion using iframes', but in my opinion if you really need to load different pages at the same time this is the best option.
In theory, you could create your own tab system using javascript or even better, using jQuery, because its UI module offers pretty cool tab control.
For every tab you could load separate "headerless-footerless" version of your specific admin page inside <iframe> element. If user wanted to modify something different, he will simply click on the tab and bring different iframe.
All this could also be done using AJAX, but iframe solution is quite easy as you just need to load ready page and all postbacks are already handled by original page and separated from master-admin-page.
You might also need to play a little bit to set correct height of your iframe to fit all the content without scrollbars, but this again, is just bit of javascript.
Nope, there's no way to force the opening of a new tab, simply because this would be unsupported by un-tabbed browsing
You can only set it to open a new window, not a new tab.
Greasemonkey springs to mind - a quick google gives open in tabs on left click. I think you could modify that so it only runs on one particular page, and you'd be up up and away.
This question made me wonder if HTML 5 allows that sort of specification, and it doesn't (nothing in one of the other hyperlink attributes, either). A new browsing context is a new browsing context, there's no way to express a preference for tab over window or foreground over background.
You can't force a tab, but if you use a target with a specific name, like target="my_cms_window", many browsers will open this as a new tab. Additionally, they will remember the name and if you use the target repeatedly, put the contents in the same tab. I have found that this works pretty well in the real world.

Ways to detect CTRL-N or when a user opens a new window

How can we detect when a user opens a new window. The user is already authenticated and we make heavy use of sessions.
We were trying to avoid Ctrl+N javascript hooks but maybe that is an option.
I am assuming the request is the exact same URL...with Ctrl+N?
We were trying to avoid ctrl-n javascript hooks
Forget it. Whilst you could in theory try to catch keypress events for ‘n’ with the Control key modifier, there are any number of other ways to open a new window or tab which may be more likely to be used, and you won't be able to catch. File->New Window/Tab, middle click or shift-click link, middle click back/forward buttons, right-click-open-in-new-window, open bookmark in new tab, double-click browser icon...
The user is already authenticated and we make heavy use of sessions.
That shouldn't be a problem in itself. I guess what you mean is that your application is dumping all sorts of page-specific data in the session that it shouldn't have, and now you find the application breaks when you have more than one window open on it? Well, commiserations and happy rewriting.
In the meantime about all you can do is tell the user “please don't try to open two browser windows on the same application”. There are potential ways you can make JavaScript on one page notice that JavaScript is running on another page in the same domain at the same time, generally involving using document.cookie as a inter-page communications conduit. But that's also a bit fragile.
If opening a new window causes a problem in your application, then you should fix the application code to handle it instead of trying to apply an inconsistent and unreliable client-side "bandage". That's my opinion.
Why?
And anyway you can't detect it. User can open new window not only with Ctrl+N but also with File->New Window.
You could possibly put a window count into the session and increment it on window.onload and decrement it on window.onunload.
Imagine me tutting, sucking air through my teeth and going "better you than me, guvna" if you use that, though.
What I have done to solve this issue is when the user authenticates set the window name on valid login.
<script>
window.name = 'oneWindow';
</script>
And then on the master page do a javascript check:
<script>
if (window.history.length == 0 || window.name != 'oneWindow')
//history length to see if it's a new tab or opened in a new window 0 for IE, 1 for FF
//window name to see if it's a CTRL + N new window
</script>
If the check is true then hide/remove the main content of the page and show a message stating they are doing something unsupported.
This works when your login page is not tied into the master page.
If you do not have a master page then I would suggest putting the check on all your pages.
Yes and no,
You'll always see it if a control has focus, else the event is sent directly to the browser and the code on the page never hear about it.
In my experience you can't hijack the browser's shortcut, your mileage may vary. You are likely to know it happened but the browser will do its thing (for obvious reason)
In most browsers, the effect of Ctrl-N is to open a new window at the same URL as the old one and associate it with the same sessionID.
Your best bet would be to modify the back end code if possible and allow for such things. Breaking the browser's feature is never a good thing.

Categories

Resources