I've searched on the internet for a while for my solution, but none of the solutions worked for me or I didn't used it correct (I think).
I have a function which looks like this and is being called when a image is clicked:
function goToGoogle() {
setTimeout(function() {
$.ajax("url/path", {
data: "data"
}, function(data){
window.open("https://www.google.nl", "_blank");
});
}, 10000);
}
When window.open is called, a message pops up and says that the popup is blocked.
I've tried to create a variable with window.open in it (var myWindow = window.open( ... );) and then set the correct url with myWindow.location = "www.correct.url";. But this will result in a error in the console.log, which says that myWindow is undefined and location can't be called because of that.
Another thing I tried was to set async to false in the ajax call, but that's depreciated.
Does anyone how to make sure it opens a new window, even a few seconds after the click event?
By the way, I need the timeout of 10 seconds.. Nothing more, nothing less.
Your code works perfectly, because
a message pops up and says that the popup is blocked.
That's just a browser policy to block popups. That's up to user to allow open popups on your site or to forbid.
Related
I need to simply open to browser windows when user perform an action (to keep it simple in this example I use setTimeout).
I have notice that the browser is able to open only the first window.open and not the remaining.
What is the cause? How to fix it?
setTimeout(function() {
window.open("https://www.w3schools.com");
window.open("https://www.google.com");
}, 3000);
You need to make the windows unique, by default, the browser gives the new window a name, but doesn't dynamically update it when multiple instances of window.open occur (source - first line of https://developer.mozilla.org/en-US/docs/Web/API/Window/open). Give them unique names (with ids help) like so:
window.open('/path/to/page.php', 'UNIQUE_WINDOW1', 'width=300,height=400');
window.open('/path/to/page2.php', 'MORE_UNIQUE_WINDOW5', 'width=300,height=400');
if this doesn't work you can do:
window.open('/path/to/page.php');
$.post('/path/to/page2.php', {}, function(res)
{
var win = window.open('', 'WINDOW_NAME', 'width=540,height=440');
with(win)
{
open();
write(res);
close();
}
});
what this will do is, post nothing to the page but, res returns the output of that file, so you assign window.open to a variable, and with it, open it and write the output to the file. :)
I want to add a tab whenever a new Firefox window is loaded for my bootstrap extension. I use this code listing:
var WindowListener = {
setupBrowserUI: function(window) {
window.gBrowser.selectedTab=window.gBrowser.addTab("http://google.com");
},
tearDownBrowserUI: function(window) {
},
// nsIWindowMediatorListener functions
onOpenWindow: function(xulWindow) {
var domWindow = xulWindow.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
// Wait for it to finish loading
domWindow.addEventListener("load", function listener() {
domWindow.removeEventListener("load", listener, false);
// If this is a browser window then setup its UI
if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser") domWindow.gBrowser.selectedTab=domWindow.gBrowser.addTab("http://google.com");
}, false);
},
onCloseWindow: function(xulWindow) {
},
onWindowTitleChange: function(xulWindow, newTitle) {
}
};
let wm = Components.classes["#mozilla.org/appshell/window-mediator;1"].
getService(Components.interfaces.nsIWindowMediator);
// Wait for any new browser windows to open
wm.addListener(WindowListener);
You can try it in Scratchpad.
onOpenWindow method have the code to open tab in new window but it executes before the window is loaded completely so adding tab in this state does not seem to work although MDN code says "Wait for it to finish loading".
Setting a timeout by setTimeout function does the job but it looks ugly.
domWindow.setTimeout(function(){domWindow.gBrowser.selectedTab=domWindow.gBrowser.addTab("http://google.com");},1000);
Is it possible to add tab for new Firefox windows after window completely is loaded without setTimeouts?
I'd go with a setTimeout(..., 0) hack. That ought to be the most reliable option and is used throughout the Firefox code itself :p
if (domWindow.gBrowser) {
setTimeout(function() {
domWindow.gBrowser.selectedTab =
domWindow.gBrowser.addTab("http://google.com");
}, 0);
}
It's really weird. I can't explain it. But from the line:
if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser") domWindow.gBrowser.selectedTab=domWindow.gBrowser.addTab("http://google.com");
remove the domWindow.gBrowser.selectedTab = so change it to:
if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser") {
domWindow.gBrowser.addTab("http://google.com");
}
this succesfully loads the url BUT it doesnt select the tab SO I tried and absolutely new idea why this stuff FAILED:
if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser") {
var tab = domWindow.gBrowser.addTab("http://google.com");
}
as soon as i put that var tab = in front it fails. If it didn't fail i was planning to put on next line: domWindow.gBrowser.selectedTab = tab
THEN this also fails:
loadOneTab has inBackground parameter, if set it to false it will focus the tab:
if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser") {
domWindow.gBrowser.loadOneTab("http://google.com", {inBackground:false});
}
Absolutely no idea but this fails to load url but it focuses the tab. If you set inBackground to true it loads the url and of course it wont focus the tab. Absolutely weird...
Posted so others can maybe find out where the problem is, maybe we need to report something on bugzilla.
I have a situation where, when a user pushes a button I perform an ajax request, and then use the result of the ajax request to generate a URL which I want to open in a new tab. However, in chrome when I call window.open in the success handler for the ajax request, it opens in a new window like a popup (and is blocked by popup-blockers). My guess is that since the the success code is asynchronous from the click handling code that chrome thinks it wasn't triggered by a click, even though it is causally related to a click. Is there any way to prevent this without making the ajax request synchronous?
EDIT
Here is some minimal code that demonstrates this behaviour:
$('#myButton').click(function() {
$.ajax({
type: 'POST',
url: '/echo/json/',
data: {'json': JSON.stringify({
url:'http://google.com'})},
success: function(data) {
window.open(data.url,'_blank');
}
});
});
http://jsfiddle.net/ESMUA/2/
One note of clarification: I am more conerned about it opening in a separate window rather than a tab, than I am about it being blocked by a popup blocker.
Try to add
window.open(url,'_blank');
Edit
Well, I don't think you can get around popup-blockers when opening a page that's not the immediate result of a user action (i.e. not async).
You could try something like this though, it should look like a user action to a popup-blocker:
var $a = $('<a>', {
href: url,
target: '_blank'
});
$(document.body).append($a);
$a.click();
Edit 2
Looks like you're better of keeping things sync.
As long as the new window is "same origin" you have some power to manipulate it with JS.
$('#a').on('click', function(e){
e.preventDefault();
var wi = window.open('about:blank', '_blank');
setTimeout(function(){ // async
wi.location.href = 'http://google.com';
}, 500);
});
Try adding async: false. It should be working
$('#myButton').click(function() {
$.ajax({
type: 'POST',
async: false,
url: '/echo/json/',
data: {'json': JSON.stringify({
url:'http://google.com'})},
success: function(data) {
window.open(data.url,'_blank');
}
});
});
What worked for me was:
var win = window.open('about:blank', '_blank');
myrepository.postmethod('myserviceurl', myArgs)
.then(function(result) {
win.location.href = 'http://yourtargetlocation.com/dir/page';
});
You open the new window tab before the sync call while you're still in scope, grab the window handle, and then re-navigate once you receive the ajax results in the promise.
The answer posted by #pstenstrm above (Edit 2) mostly works, but I added just one line to it to make the solution more elegant. The ajax call in my case was taking more than a second and the user facing a blank page posed a problem. The good thing is that there is a way to put HTML content in the new window that we've just created.
e.g:
$('#a').on('click', function(e){
e.preventDefault();
var wi = window.open('about:blank', '_blank');
$(wi.document.body).html("<p>Please wait while you are being redirected...</p>");
setTimeout(function(){ // async
wi.location.href = 'http://google.com';
}, 500);
});
This fills the new tab with the text "Please wait while you are being redirected..." which seems more elegant than the user looking at a blank page for a second. I wanted to post this as the comment but don't have enough reputation.
There is no reliable way. If your tab/window has been blocked by a pop-blocker in FF and IE6 SP2 then window.open will return the value null.
https://developer.mozilla.org/en-US/docs/Web/API/Window/open#FAQ
How can I tell when my window was blocked by a popup blocker? With the
built-in popup blockers of Mozilla/Firefox and Internet Explorer 6
SP2, you have to check the return value of window.open(): it will be
null if the window wasn't allowed to open. However, for most other
popup blockers, there is no reliable way.
I am writing a chrome extension that when clicked, will close the current tab after a given amount of time.
I am sending a message with the time, from popup.js to background.js. But the tab won't close.
The alert works when I uncomment it, so it seems to be just the remove line. I assume it's something about tab.id.
chrome.extension.onMessage.addListener(
function message(request, sender, callback) {
var ctr = 0;
ctr = parseInt(request.text, 10);
setTimeout(function() {
chrome.tabs.getCurrent(function(tab) {
//window.alert("Working?");
chrome.tabs.remove(tab.id, function(){});
});
}, ctr);
}
);
1.
chrome.extension has no onMessage event. I assume you mean the correct chrome.runtime.onMessage
2.
You have probably misunderstood(*) the purpose of chrome.tabs.getCurrent:
Gets the tab that this script call is being made from. May be undefined if called from a non-tab context (for example: a background page or popup view).
Since, you are calling it from a non-tab context (namely the background page), tab will be undefined.
(*): "misunderstood" as in "not bother to read the manual"...
3.
It is not clear if you want to close the active tab at the moment the timer is set or at the moment it is triggered. (In your code, you are attempting to do the latter, although the former would make more sense to me.)
The correct way to do it:
chrome.runtime.onMessage.addListener(function message(msg) {
var ctr = 0;
ctr = parseInt(msg.text, 10);
setTimeout(function() {
chrome.tabs.query({ active: true }, function(tabs) {
chrome.tabs.remove(tabs[0].id);
});
}, ctr);
});
Also, note that using functions like setTimeout and setInteval will only work reliably in persistent background pages (but not in event pages). If possible, you are advised to migrate to event pages (which are more "resource-friendly"), in which case you will also have to switch to the alarms API.
This is something that's been driving me nuts.
I'm trying to detect whether the uses closes or navigates away from a page in order to do an ajax response upon the event. I have tried almost every possible method to invoke this but no luck. The only thing I can think of is that the activate window in question was fired using: window.open() method. Could that cause any issues? What I have so far:
window.onbeforeunload = function() {
//ajax stuff here
};
However, I've noticed that this does not work after the page is fully loaded. The event fires within the first few milliseconds (if I open the window and try to close it right away) during the page load and won't work after that.
Any ideas?
I once ran into this issue, and found it worked for me only by setting async : false on the ajax, like this:
jQuery(window).bind('beforeunload', function () {
jQuery.ajax({
url: 'your.url',
async: false,
data: yourdata
timeout: 2000 // or whatever timeout in milliseconds you want
success: function(data){
// Do whatever you want
}
});
});
As Ian mentioned on the comments, it's a good idea to set a timeout to prevent the window for taking too long to close in case the request takes a while. And keep in mind it won't work in all browsers...
This also supports old versions of IE and Firefox.
window.onbeforeunload = function (e) {
var message = "Your confirmation message goes here.",
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
};