I want to open new window if "F2" pressed. Below code gives me newWindow is null error message in firefox. If I don't use pop-up blocker it works. The same in IE. It work in chrome even with pop-up blocker on.
using jstree pre 1.0 stable
hotkeys: {
"f3" : function () {
url = "http://www.vse.cz";
var newWindow = window.open(url, '_blank');
newWindow.focus();
return false;
},
Q1: Can I make it work for all browsers so users don't have to change their settings when using hotkeys plugin?
Q2: How come Using JavaScript instead of target to open new windows works without any troubles in firefox? Is that because it's a link and not using hotkeys plugin?
My understanding is that the script from above page somehow
manipulates what happens
when user clicks a link. It changes the properties of the click so
browsers "don't know" that it's new window so pop-up blocker is
bypassed.
In my case I use pure js function triggered by something else, not by
a user click. And that 'my function' doesn't changes properties of any html objects. I think this is the difference. I am not sure if I am
right here.
Unfortunately, there's nothing you can do to open a new window on a keypress (other than disabling the popup blocker).
The way that the popup blockers in IE, Firefox and Chrome work (from a high level) is by the browser (upon encountering a call to window.open) walking up the JavaScript call stack to determine if the current function is—or was called by a function that is—an event handler. In other words, it finds out if the current function is executing because the user did something that triggered a DOM event.
If so, then the popup is allowed; otherwise it is blocked. However, the question of which events qualify as "popup-allowing" vary by browser. By default in Mozilla, only change, click, dblclick, mouseup, reset, and submit qualify. (I assume IE is similar.)
Functions that are event handlers for any other type of event – such as keydown/keyup/keypress in your case – do not qualify for special popup-allowing treatment, which means your popup is blocked and is why your call to window.open returns null.
Chrome, however, does consider the keydown event eligible for allowing popups to be opened, which is why your script works in that browser.
Here's a reduced example to demonstrate how this works. This demo:
Defines a function called spawn() which calls window.open to open a popup.
Calls spawn() immediately as the page is loaded. This is blocked by all browsers since the call is made from the global scope; it is not called from an event handler.
Attaches a function to window.onkeydown which calls spawn(). If you press any key in Chrome, the popup will open because it allows popups from keydown handlers. In IE and Firefox, the popup will be blocked becuase those browsers do not allow popups from keyboard events.
Attaches an event handler to the link which calls spawn(). When you click the link, the popup will be allowed in all browsers because the call to window.open can be traced back to an event handler for a click event.
As you can now see, nothing goes on to manipulate event properties or "trick" the browser in to not knowing that there's a new window. The behavior of popups being allowed to open from link clicks is by design, the theory being that if you've clicked on something, it's likely that you want to see whatever is in the popup. However, when a call is made to window.open from a place where you've not done anything (such as the global scope), it's likely you do not have any interest in whatever [ad] is in the automatically-launching popup.
In this way, popup blockers prevent annoyances (automatically launching ads) while still allowing pages to open popups at the user's request.
Related
I have a seemingly simple requirement but I have been stuck for days. Can someone give me a hand?
I need a confirmation prompt if the user tried to close the pop-up window
if the user click ok to close, I need to call an ajax call
My original design is to add an onbeforeunload event handler, have it returns a string which triggers a prompt. Works perfectly.
The problem is the next part. Added a unload listener, a pagehide listener, and a visibilitychange listener - in all three cases, Chrome doesn't fire the event if the user close the window, only if I refresh the window. Firefox works perfectly. I am using a sendbeacon call which should work in these scenarios and if I add a breakpoint to pause before the window closes, the beacon is sent, so it seems like Chrome is closing the document too fast and never bother sending the last beacon, which makes the whole exercise pointless.
Has anyone face similar issues and if so, any way to work around it?
I'm struggling with the same problem.
Reading about the event on the documentation I've noticed that it is an unstable event, and moreover in the compatibility table, Chrome is set to "not supported".
But I noticed that chrome fire the event one time only.
If I close the browser and then i re-open it, the first time the event is fired, but it not work with tab closing.
LIVE DEMO
Given a URI of a file, I'd like to open it in a new tab (not a new window).
It looks like it is not possible to use $window.open(uri, '_blank').
So, I tried the following trick:
var link = angular.element('');
angular.element(document.body).append(link);
link[0].click();
link.remove();
and it works.
But, if I put exactly the same code in a promise callback, it doesn't work anymore (it opens the file in a new window instead).
Any idea what's going on here?
PLAYGROUND HERE
From your code/content, you can't force the browser to open a new tab (rather than a new window, or vice-versa). It's up to the browser settings to force it one way or another.
Anything else would be a security risk.
Let us understand fundamental how pop up blocker work.
If user trigger the function to open a new url, then pop up blocker will allow it(it should applied to any modern browser - at least firefox, chrome)
If not from user (like javascript function in background, promise or any other function trigger not from user), browser will block unless user whitelist the site manually.
This is not working.
function openInNewTab() {
window.open('http://stackoverflow.com','_blank');
}
openInNewTab();//fail
This is working
<h1><button onclick="openInNewTab()">Open In New Tab - working</button></h1>
I created simple plunkr version - http://plnkr.co/edit/QqsEzMtG5oawZsQq0XBV?p=preview
So, to answer your question. It is impossible unless user authorize it (user trigger it or white listed the site).
Quote from firefox -
Pop-up windows, or pop-ups, are windows that appear automatically
without your permission.
https://support.mozilla.org/en-US/kb/pop-blocker-settings-exceptions-troubleshooting
*Open in new tab / new windows not make any difference. Pop up blocker will still always block. It doesn't means that browser will allow if open in new tab. It is just coincidentally for certain browser default the settings in that manner.
Workaround
You can ask user explicitly to trigger the function to open in new tab after the background execution.
You can display message in UI to ask user to open the url.
Example - http://plnkr.co/edit/iyNzpg64DtsrijAGbHlT?p=preview
You can only open new windows inside click event handlers fired by the user.
The reason for this is usability.
I'm not sure if all browsers have this behavior but some browsers do not allow scripts to open windows without the user being noticed. Imagine when you visit a web page and suddenly, the web page opens several windows => it's annoying.
See this DEMO (tested with my Chrome and Firefox), even we trigger click event by script, the browser still blocks the popup.
$("#test").click(function(){
openInNewTab();
});
$("#test").click();
You cannot open a new window inside your ajax success callback because your ajax success is run in another cycle after the click event handler has finished its execution.
See this link for a workaround
if I put exactly the same code in a promise callback, it doesn't work
anymore (it opens the file in a new window instead).
I'm surprised that you're still able to open a new window. But this problem really has a lot of things to do with click events fired by the user.
Your problem is two-fold, and both folds tread on uncertain territory.
In the old days of browsers, window.open did exactly that – open a new window. That's because the concept of tabs hadn't been invented yet. When tabs were introduced, they were treated exactly like windows to improve compatibility, and that tradition continues to this day. That, and the fact that window.open was only standardized very recently, means that JavaScript cannot distinguish between windows and tabs.
There is no "normal" way to specify whether a link should open in a new tab or not. You can use the following hack, though: specify a custom window size to the open call (via the third argument), like so:
window.open('http://example.com', '', 'width=' + screen.width);
This will cause almost all browsers to open a separate window because tabs cannot have custom sizes.
In JavaScript, there are trusted events and untrusted events. Trusted events are, for example, legitimate clicks on a link by the user, whereas an untrusted event would be a manual click() call on a link.
Only trusted event handlers may open new windows/tabs. This is to prevent client-side attacks that crash the browser or confuse a user by rapidly opening a hundred tabs on mouseover or something similar.
Your second example doesn't work because the popup blocker blocks the untrusted event that you triggered via the click(). Although it was caused by a real click, the asynchronous call in-between severs the link to trustedness.
working version
$http.get('https://api.github.com/users/angular').then(openInNewTab());
EDIT----------------
Do not know why but a click() method called from a callback function acts differently than calling it straight.
You can see it here with a set interval example.
That is why I had call the function directly rather than going through a callback.
see it with timer callback
or you can use $window service please see here : http://plnkr.co/edit/8egebfFj4T3LwM0Kd64s?p=preview
angular.module("Demo", []).controller("DemoCtrl", function($scope, $http, $window) {
$scope.uri = 'http://martinfowler.com/ieeeSoftware/whenType.pdf';
function openInNewTab() {
var link = angular.element('');
angular.element(document.body).append(link);
link[0].click();
link.remove();
}
$scope.works = openInNewTab;
$scope.doesntWork = function() {
$http.get('https://api.github.com/users/angular').then($window.open($scope.uri));
};
});
For us the following worked well: http://blog-it.hypoport.de/2014/08/19/how-to-open-async-calls-in-a-new-tab-instead-of-new-window-within-an-angularjs-app/
In short: We remember the reference to the new window and changing the location afterwards.
Strange behavior - Im trying to open a new window in a callback - using Angular but probably a general JS issue.
If I do this:
$window.open('http://google.com', '_blank');
It works fine. However this doesn't as it gets blocked by my browser - I am using Safari 7 and have "block popup windows" checked:
Items.list(function(items) {
$window.open('http://google.com', '_blank')
});
Why does the browser block that and not the other and how can I circumvent this? I played with setTimeout as well as some SO post suggestion to assign $window.open to a variable before calling async but did not work here.
Popup blocker logic often blocks popup windows when the popup window is not opened as a direct consequence of a user action (like a click).
A callback that happens asynchronously is NOT a direct consequence of a user action - it's sometime later and is not directly connected to that action (as the browser sees it), thus the browser may not allow it.
The usual work-around is to open the popup window immediately (as a direct consequence of the user action) and then populate its content later after the asynchronous callback occurs and the content is available.
Does angular 6 support popup window like javascript? I am not looking for a modal window solution. I want to be able move the window to another screen like you can do with JavaScript popup windows. Is there any documentation on that? How can you go about doing it on Angular 5/6 ie to open a pop up window
Currently I am developing a web application for which I am using a pre-loader icon. What I want is that the pre-loader becomes visible every time the user navigates to another page or refreshes the page. So far I have the following solution:
window.onbeforeunload = function() { $("applicationdisabler").show(); };
For Safari and Firefox it works fine when the user clicks a link or refreshes the page. However in IE7 the div only becomes visible when the user clicks a link and NOT when the user refreshes the page.
The user can refresh the page by hitting F5 (on Windows) or any other possible way the browser provided.
Of course I have been looking for some workarounds already. The following code shows the alert in IE7, but the div still doesn't become visible.
window.onbeforeunload = function() { $("applicationdisabler").show(); alert("come on!"); };
The code of my div:
<div id="applicationdisabler"><img src="images/preloader.gif" /></div>
Hopefully someone can help me out.
You need to put the # before the id on the jQuery selector:
$("#applicationdisabler").show();
Why not use just use the onLoad listener instead? Although it would be slightly slower it should be more reliable.
Actually after a bit of looking around I'm not sure modifying the DOM makes any sense unless the onBeforeUnload handler returns false first - i.e. forces the user to stay on the same page.
As I understand it the onBeforeUnload event is fired just before the page is unloaded, so if you don't return false the browser will unload the page and DOM, and any JavaScript executed after that will be pointless.
That doesn't quite explain why JavaScript isn't executed properly in the onBeforeUnload function, but from what I've seen sites only use the window.alert or window.prompt dialogs to ask the user if they want to leave the site, and then often executing JavaScript if the user decides to stay.
Hence I'm guessing that some browsers may not allow DOM manipulation when this event is fired - since if the page is unloaded any DOM manipulation done is completely pointless.
So either:
Return false in your onBeforeUnload method, and then show your preloader (although this will stop navigation to the next page)
Use the onLoad event of the next page to show the preloader image instead
Also note: Opera versions 9.5 and below do not support this event (I'm unsure about later versions) but GMail does manage to catch the back button in Opera.
Possibly related is this security warning for IE7's implementation of the onBeforeUnload event - it's possible Microsoft patched it in a way that prevents the things you're trying to do. And I know IE6 and below don't allow commands like document.location='' in the onBeforeUnload handler for security reasons.
I am debugging someone else's web page. There is a link on it which tries to open itself in a popup window, the reason for this is unclear -- there is nothing obvious in the HTML (onclick=foo) to cause this.
Disabling JavaScript means the link opens normally. I have Firefox/Firebug/Dom Inspector and would like to trap whatever JavaScript event is leading to the popup. Since I can't find the code, I'm stuck.
Can Firebug create a sort of global breakpoint to trap all code? Is there some other way to hook into this behaviour and inspect it?
The page in question is http://hijinxmusic.co.uk/ and the problem link is "Green Policy" near the bottom.
Thanks for your time.
The green policy document opens a popup with itself on load:
<body onload="MM_openBrWindow('green%20policy.htm','green','width=900,height=600')">
This is inside green policy.htm
Just to add to David's answer, the function that gets executed on body load in the page at http://hijinxmusic.co.uk/green%20policy.htm essentially calls window.open()
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
The bigger problem is that the page that you are trying to open in a new window is the same window that the user is already looking at, which doesn't make any sense. What's more is that if the popup blocker wasn't blocking window creation, you would have an infinite loop of popups (load green policy.html, open a new green policy.html, load green policy.html, etc). Where did you want the popup to happen?
Also, to add to Russ Cam's answer, you can detect when the popup fails to open by checking the return value of window.open. I have used this successfully in Firefox, IE, Opera and Safari (haven't needed to test in Chrome). Using the provided function, this is how I handle blocked popups:
function MM_openBrWindow(theURL,winName,features) { //v2.0
if ( !window.open(theURL, winName, features) ) {
// Window failed to open:
// show a HTML dialog/popover that prompts the user to allow
// popups from this site, along with a `cancel` and `try again`
// button. The `try again` button will attempt to open the
// window again with the provided parameters
dialog.popupBlockedNotice.open(arguments);
}
// Window opened successfully.
}