I am writing a web application and I open some popup windows with respect to user events.
Now I want to avoid from having too many opened popups, so I decided to bring already opened popup front instead of pop a new one.
In my researches I saw that there was a method called window.focus in old browsers like before Chrome 20 or so, but this method is no longer available because of over usage for advertisement.
Is there any solid way or even workaround to bring an already opened up popup front in javascript?
Thanks,
Ugurcan
I came up with a workaround for Chrome. In javascript, when you use window.alert method, Chrome brings according window to the front, but this is not applicible for Firefox and IE.
I will use this workaround for now. Only problem here is that, one does not simply decorate window.alert pop-up box.
We can just use css z-index to bring it at front and z-index is supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc) as per caniuse.com
Related
For context, the problem I'm facing is that our business still has to use Internet Explorer 11 for some of our stuff. As a result, loads of people are trying to open newer sites (like mine) which are only accessible on newer browsers like Edge and Chrome. I have not accommodated for IE when building because it will be phased out completely from our business in the next 6 months.
I've tried to force users to open the link (to my site) in Edge, by using the link href edge-browser:http://google.co.uk/ however the problem with this is that if the user is already using Edge browser, Edge doesn't recognise the edge-browser: prefix and the link just times out! Very infuriating.
I'm wondering if anyone has a work-around, or whether there might be a way to script a button that tries the Edge link first and if it times out after 3-4 seconds, reverts to the second link instead? What about if there is a way of detecting which browser the user is using, and only showing them the appropriate link? I've trialed having two links present but our employees don't understand the difference or which link to press, and are complaining that the formatting of the site is all wrong when accessing via IE.
Let me know what you think - sorry, I am not very tech-savvy when it comes to browsers.
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'm using the following code to open a new tab on click of a PDF download.
The problem is the new tab becomes the main tab often before the PDF loads.
How can I make the view stay on the current window (PDF) and open the new tab but not switch to it?
Note: In Chrome and Opera they understand the HTML5 download tag so the PDF simply downloads and the current window redirects - All good! So this is only a problem on IE & Firefox.
<h2 style="text-align: center;"><a href="http://cdn2.hubspot.net/hub/155045/file-847580737-pdf/Stepping_into_a_new_age_of_marketing_with_CRM_FINAL_APPROVED.pdf" onclick="casestudiesopen()" download><strong>Click here to download your eBook</strong></a></h2>
<script>
function casestudiesopen() {
window.open("http://www.workbooks.com/case-studies");
}
</script>
Well, I'll advise you to read this Stackoverflow answer, which is, in a way, quite similar to yours (the purpose anyway) :
Javascript disable switches current tab functionality in browser
JS/JQuery is indeed very powerful but also have its limits. Imagine a web page always requesting and keeping focus once you've opened it. I think you would be really annoyed, among other things.
That's why browsers prevent those kind of actions. Common browsers at least. Meaning, there's no way to prevent a browser like Firefox, Chrome, IE & Co. to focus a table since it depend of user's parameters.
You'll have to find a way to workaround your problem. I can propose this answer since it seems to have worked for the other guy.
The following javascript opens a pop-up in Firefox, Safari, IE, and Google Chrome:
window.open("http://google.com", "foo", "toolbar=yes,location=yes,menubar=yes")
However, in Google Chrome the toolbar (with the usual forward and back buttons, etc.) does not appear on the popped-up window. (Tested on both Windows and Mac.)
How can I fix this? I would like the user to be able to navigate forward and back using the tools with which they are most familiar.
There is a bug open for Chrome:
https://code.google.com/p/chromium/issues/detail?id=82522
It has not received a lot of attention from Google. Vote for it.
Unfortunately Chrome only supports a small set of window features when using window.open. If you believe that this is a bug or an issue you can file it at [http://crbug.com].
If you just use window.open(url) then it will open a new tab in the same window with the buttons you desire.
Updating on current behavior (as of 4/26/2017)
The expected behavior should be a new PopUp Window when size dimensions are passed as arguments to window.open (if toolbar is enabled, then add the toolbar to the PopUp window). If no dimensions are indicated just default to opening a new tab (in this case toolbar enabled is the default).
(Btw, this is FF current Behavior (version 54.0a2)) .
Chrome Behavior (Canary 60.0.3079.0)
Opens PopUp Window to indicated dimensions
window.open("https://google.com","foo","width=800, height=780")
Opens New Tab (browsers default minimized size, ignores size dimensions)
window.open("https://google.com","foo","width=800, height=780,toolbar=1")
FF Behavior
w/Size Dimensions
Opens PopUp Window w/o ToolBar (NO toolbar)
window.open("https://google.com","foo","width=800, height=780")
Opens PopUp with ToolBar
window.open("https://google.com","foo","width=800, height=780, toolbar=1")
w/o dimensions
Opens New Tab
window.open("https://google.com","foo")
window.open("https://google.com","foo", "toolbar=1")
The only option for Chrome is to not specify a third argument. Chrome ignores the third argument as they are rightly allowed to do according to the HTML 5 specification, but if present the window appears to always open in a floating widow without controls.
If you do not specify a third argument the window that opens will be a new tab and will have all of the features the user needs.
If you do specify a third argument you will get a new floating window with no controls other than the URL display.
I know this is an old post, but the most recent answer is from September, 2013, so I am taking that as a reason to follow up with this answer. Advance apologies if this is not proper etiquette.
https://code.google.com/p/chromium/issues/detail?id=82522
That's the link to the bug over on the Chrome support page.
I am posting it here in the hope that others experiencing this problem will raise attention to this issue, as suggested in a previous answer.
My apologies for posting this comment as a separate answer. I don't have enough karma to do this the right way.
What are situation when you want to use window.showModalDialog function? It seams that you can do exactly the same with window.open function and few parameters that remove some of the chrome (navigation, addressbar, etc...)
When would you want to use window.showModalDialog and window.open?
It has been a few years since this question was originally asked and things have changed a bit since then. window.showModalDialog is now officially standardized as part of HTML5 and is supported in IE, Firefox 3+, Chrome (albeit buggy), and Safari 5.1+.
Unfortunately window.showModalDialog is still plagued by a number of issues.
Modal dialogs are blocked as popups by default in Firefox, Chrome, and Safari.
The modal dialogs in Chrome are buggy and aren't truly modal - see http://code.google.com/p/chromium/issues/detail?id=16045 & http://code.google.com/p/chromium/issues/detail?id=42939.
All browsers except Chrome block the user from interacting with the entire window (favorites, browser controls, other tabs, etc...) when a modal dialog is up.
They're a pain to debug because they halt JavaScript execution in the parent window while waiting for the modal dialog to complete.
No mobile browsers support window.showModalDialog.
Therefore it's still not a good idea to use window.showModalDialog. If you need the window opened to be modal (i.e. the user cannot interact with the rest of the page until they deal with the dialog) I would suggest using jQuery UI's dialog plugin.
window.open will work for non modal windows but I would stick with jQuery UI's dialog because opening new windows tends to annoy users.
If you're interested I write about this in more detail on my blog - http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/.
Modal dialogs are dialogs that once opened by the parent, do not allow you to focus on the parent until the dialog is closed.
One could use a modal dialog for a login form, edit form, etc where you want to have a popup for user interaction but not allow the user to return to the window that opened the popup.
As a side note, I believe only Internet Explorer implementes window.showModalDialog, so that kind of limits your usage of it.
showModalDialog() is currently being standardized as part of HTML5. The third argument (for additional options) is not present in the HTML5 version, and is (safely) ignored by Safari and Chrome.
http://dev.w3.org/html5/spec//user-prompts.html#dialogs-implemented-using-separate-documents
Note that there's a bug in Chrome 2 which prevents showModalDialog() from loading properly. The popup window appears, but the content never loads.
One more reason to avoid using showModalDialog().
showModalDialog()works well in Internet Explorer, Firefox (3 and above)
Works in Chrome but popup is not model (you can go to parent window)
Note that while you can show modal from any popup window, you cannot use window.open from a model dialog in some browsers (IE, Safari).