I have a form with "target" set to "_blank" in order to open a new tab when the form is submitted. The action of this form is an aspx page that does server-side processing and returns an html. I am trying to figure out whether it's possible to close the new browser tab right away without waiting for the returned html.
Thanks for any idea.
There's a window.close() property that comes with the browser API. Not sure how you're setting up your server-side processing, but you can listen for an event on that browser tab and fire off the window.close() when the HTML is returned from your server.
Combining this with the onLoad event, you should be able to pull this off:
window.addEventListener('load', e => {
window.close();
});
Related
I have an HTML page that includes only a script tag, I don't control the script and I can't change it (so I can't fire my custom event for example).
The script ends with a redirect (using window.location).
Is there a way to add a new script to the page that will listen to the page events and "catch" the redirect (actually it's better for me to catch the new loaded document)?
Something like:
window.addEventListener('redirected', function() {
// do staff
});
(I know there is no "redirected" event, it's just for the example).
It's very important to make it clear that the redirect isn't caused by an anchor click or back/forward button click, so I can't use events like click or popstate.
You might want to look at the onpagehide event or the onunload event, both of which occur when the user navigates away from the page.
However, if you wish to interfere or prevent the redirection itself, onbeforeunload is what you want.
Just take a look at :
unload function w3school or mozilla developper network
beacon function for sending a final XMLHttpRequest
I want to capture the page reload event using JavaScript and then redirect to a different URL (i.e. load the different page in the same browser tab) instead of the letting the existing page reload. My code is here -
<script type="text/javascript">
window.onbeforeunload = function(e) {
window.location = "https://www.google.com";
e.preventDefault();
};
</script>
The code gets executed when I right click in Chrome and then click reload but www.google.com does not load in the tab - instead the page reloads in the same tab.
What should be changed here?
You can only do certain, things inside this event handler, mostly ask for confirmation, redirection is too late.
However you can redirect after the user confirms. Use .returnValue
https://html.spec.whatwg.org/#the-beforeunloadevent-interface
So, what I have is a lot of pages like this, with GET parameters: benchmark.php?game_id=87
that display the information about the particular game (info is in a database) and also contains an Edit button.
The Edit button opens a new window using JS window.open("edit_game.php?game_id=87",...)
The Edit window contains a few textboxes to add/modify data and a Save button.
The desired behaviour here is that when I press the Save button on the edit_game.php page, not only that the information is saved in the DB (this works) but also the benchmark.php?game_id=87 page is maybe refreshed so that the information displayed is actual. I don't know how to do the 'submit on page x, page y is aware and refreshes'.
I assume I should use AJAX for this but I don't know where to start. What I tried is something like this
setInterval( function(){
$('#refresh_station').load('game_information.php');
}, 2000);
that every 2 seconds it refreshes the information present in benchmark.php?game_id=87 but I find this very inefficient since it refreshes the info even if no modifications happened.
Is this the only way to approach this situation?
Edit: I should mention that edit_game.php?game_id=87 is not supposed to close or anything after pressing Save. So I can't just use the submit form to redirect back to benchmark.php.
Yes you should use Ajax for it also add one field in Database table last_update, now when page edit_game.php?game_id=87 load it have last_update time, ajax check this last update on some interval time if ajax see there is any update page should be refreshed.
Running a loop that checks every few seconds whether the records have changed isn't the best solution in my opinion. There's a much easier way to trigger a page refresh when you submit a form in a popup window.
Using window.opener you can perform actions on the window that opened the popup that you're currently in. In your case:
<form onsubmit="window.opener.location.reload();">
Your form here.
<input type="submit" value="Save changes">
</form>
Or in jQuery:
$('form').submit(function() {
window.opener.location.reload();
});
https://jsfiddle.net/yqv1eh8w/1/
postMessage
can communicate with the child window. Link
window.addEventListener("message", function (event) {});
will let you listen to it from a child window.
This should be help you with what you want.
The entire thing communicates with the help of events and messages.
Also, you will need to run this locally (coz I opened popups to the same window)
IMO, the best approach is to use a popup form. If your web page is already using Bootstrap, you can add a modal popup easily with the edit form as it's content. When clicking on the edit button, instead of opening a new window, you can open this popup.
Then submit this form with ajax on click of the submit button and inside the Ajax success function, add javascript/jQuery to close the modal and refresh the page content.
I have JSP where i submit a form using javascript. Its a popup window so after submission popup must be closed. I used following code:
document.forms["formname"].submit();
window.close();
Problem is - Form gets submitted successfully but window doesnt get closed.
Its work fine in IE.
I have a doubt how it is working in IE.
Javascript doesn't have any control after/until you submit the form and control is returned back to the browser. You should use some another mechanism to close the window after submission of form.
Instead of closing the window from a script running in the context of the window to be closed, try closing it from the context of the window that opened it. For example:
var popup;
function pop() {
popup = window.open('foo', 'mypopup', 'menubar=no,location=no,resizable=no,scrollbars=no,status=no');
console.log(popup);
}
function unpop() {
popup.close(); // close the popup
}
This works for me in Firefox. You can test it live here.
As you've discovered, once you submit the form, you've turned over control to the browser and there is no guarantee that any more javascript in that page will execute. It may just immediately start loading the result page. As such, you have several options:
You can make the result page close itself. So, when the result page loads after the submit, it contains its own window.close().
You can use ajax instead of a form submit to send the data to your server. Then, the lines after the ajax code sends the data will execute. To be safe, you may want to wait until the ajax call returns successfully before closing the window (depending upon what you're doing and how important it is to know whether it succeeded or not).
You can control things from the parent window that opened the form and close things from there.
There may be different reasons of page unloading:
1 User closes the current window.
2 User navigates to another location.
3 Clicks the Back, Forward, Refresh, or Home button.
4 User submits a form, and then browser starts to unload current page and load page with results of form submitting. (Assuming that the current window is the form's target).
5 and so on...
Can I somehow know in onunload handler that the reason of unloading is p.4, i.e. moving to page with results of form submitting?
I could define some flag when submiting form, but this does not solve the problem. Because response (on form submit) from web server takes some time, browser doesn't unload the current page immediately and waits response from server. And during this waiting user may close window or navigate anywhere. And I need to know whether was it indeed moving to results page or something else...?
You could hijack some of those events.
For example for links, you could add an event handler on links that saves their href attribute, performs what you require, then sets window.location to the href you had stored in a variable.
The exact reason of page unload cannot be known in the unload handler. OnUnload event is not a standard and was implemented by IE first.
Different browsers might handle it differently and fire the event for different cases.
msdn reference
mozilla reference
So if you are trying to know the reason of unload in the unload handler, I think you might be out of luck. However as Alex pointed out in his answer, you could probably know about user navigating away from your page by clicking some link on your page by making your click handlers for those links more intelligent.
on unload cant handle its looks like but maybe when load you can handle.
as explained
performance.getEntriesByType("navigation")[0].type
You can check this Link
What is the replacement for performance.navigation.type in angular?