Is there a way to popup a web page, and retrieve some information from the page as it is being closed or before being closed?
I have done me homework and know about jquery popups etc, but I want something I can learn the basics from.
/vfclists
document.body.unload = PageUnload;
function PageUnload{
// this fires when the page is unloading
}
Chris Ballance's answer demonstrates how you can have JavaScript call a function when a page is closed. That's part of what you need to do. The other part is getting the information out if it.
You don't say whether you want to get that information to the server, or get it to the page that launched the popup. If you want to get it back to the server, then you can use an asynchronous AJAX call. Just be aware that could introduce delays between when the user tries to close the window and when it actually goes away. I would have the PageUnload function change some text on the page to "Closing window..." or something to let the user know that "top men are working on it".
If you're trying to push the information to the other page, then you need to use window.opener or window.parent, depending on how the popup is launched. See the w3schools documentation for more information.
Related
I'm wanting to be able to theoretically pass a URL to a window.print() (yes I know you cannot pass a url to this function) via a button. Then the print window would pop up with a page/article that you are not currently on in the browser.
For example: Let's say I am on Facebook.com and I have a share button for an article that pops up on Facebook.com. Lets say that when you click share, there is a print button that when clicked it will print the article (let's say this article is google.com for example). When I am on Facebook.com I want to be able to print Google.com using that share button WITHOUT having to even go to the website/page Google.com.
Is this something that is possible with javasript/Jquery. I have been doing a lot of research into it but not finding anything that would fit this criteria.
Thank you for your help!
I have tried setting up a jquery function that takes in a doc url and print the window but it continues to print the current page that I am on.
I have tried doing a lot of research on the idea but am continuing to see problems where people are only trying to print the page that they are currently on.
It is always possible if you work on it, with a little bit of creativity.
I imagine you can fetch the content of the page through iFrame element, keep the element hidden and then print the content of it.
Found that Link that might help you
I am creating a web app using web socket, which on user closes the tab I will make an API call to the server to clean the user related info in the server, I used onBeforeUnload listener in javascript, but this method also gets triggered during the page refresh.
I need to trigger a method only during the tab or browser close, but not during the page refresh.
I know this question has been asked several times, some solution suggested using cookies will not be helpful in my case
navigator.sendBeacon() method can be used for sending data from browser to server when a tab is closed.
Here is an example:
window.addEventListener("unload", function informServer() {
navigator.sendBeacon("/server-api-to-collect-data", my-data)
})
More information:
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
As far as I know, you can not listen to actions of browser's tab close or exits. For your application it is an "unload", whatever caused it...
The only thing I could think about is maybe add a listener for keyboard key press (F5), however it doesn't help in case someone refreshed by clicking on the browser's refresh button.
I don't know what is the use case, but most of the things should be done when a page unloads (no matter why) and/or when the page is back up again. So most of the solutions are for situations where your page is loaded again - and then you can determine what was the source of the load and make farther actions, but since you have an option were someone can close and never come back, that might not be the case.
Some solutions for page load up:
You can use Navigation type.
You can check referer.
You can use cookies or other types of browser storage.
I would recommend to rethink about your use case. Maybe you can do whatever you want on load up or leave it on onBeforeUnLoad without knowing the future :)
Currently I'm working with Mercado Pago API, but the thing is that I want when the user clicks the pay button, I want to open a new window in the browser (chrome, firefox, etc.) in the middle of the screen where is going to fill his credit card number and all that stuff meanwhile i want that the background site (I mean the main site where the user clicked on pay) to be blocked, like with darker colors, and not be able to do anything in that site until the user close the new window or he finish with the payment. I've been looking on the internet but I haven't found anything related to the blocked site. Maybe you could help me or have any idea to make that. thanks in advance.
I can't make comments, so sorry in advance for this being an "answer". But are you not able to store information about what the user has selected and then use the current page to process the payment, then bring back or send off what they wanted? perhaps using AJAX to run a PHP page that stores something. Just a suggestion but not entirely an answer, because AFAIK you can't "block" tabs as that could be very dangerous and could be used for the wrong reasons.
The task you want to do requires both back-end programming (php/server-side) and a bit of front-end jquery(js) + ajax.
For front-end something like this could be your start.
Bootstrap Static Modal Example.
And you would need to put your form there, submit it via ajax, and on success close the modal.
I hope this could help you a bit, and get you started in the right direction.
Note: This is not particularly safe. (It's not hard to hide the modal and fiddle around the page in the background.
I have site which contains many links. User can open links in new window. User can log out from one window. If they do so and click on the other window of my site then I want to give an alert to the user saying that "Please login to continue". My questions are:-
Is this possible in Drupal 7?
Is there any extra module to support this.
If there is no contributed module available for this then my idea is to register a click event on the page(document) inside JQuery which will always check if user is authenticated or not. I want to know that which function in Drupal will help me in understanding authenticated user of site in JQuery.
Please share if any other option available to achieve this goal.
This is not an easy task, but I am going to explain how I would do so (without too many details):
Create a web service which receives a cookie and returns whether it represents a live session or not.
Use the visibility change javascript event to detect when a user leaves the browser or comes back in. When you notice the user has come back to the browser, perform an AJAX call to the server you set up in step one. You should provide the cookie stored in the browser, and expect a boolean answer.
Depending on the response given by the server, display a modal dialog with Javascript showing a login form orwhatever you consider necessary.
Note: This method will only work if the user is using a browser supporting visibility change events, and can be bypassed disabling Javascript code execution. In addition, the user will still be able to see the content if the browser is not the focused window (for example, there are two opened windows, each of them covering one half of the screen. The event will not fire until the focus comes back to the "forbidden" window).
My flow is as follows: the user clicks sign in on site 1. a pop up is opened from site 2 asking him to login using twitter. he then logs in - using oAuth, so the page changes. After a successful login the pop up should close and the code on site 1 should receive a notification.
What didn't work:
WebIntents - well, the examples on their site didn't even work, so I didn't try it locally..
easyXDM - communicates with an iframe, not a popup.
porthole - same, uses an iframe.
A horrible solution is refreshing the iframe every couple of seconds, to check if the user logged in already.
Is there a better way to do this? better libraries?
if you can refer the popup to another page after the user is logged in, you could use this:
main page:
localStorage.setItem('user_signed_in', false); // signed out by default
window.open("http://www.google.com/", "google_window", "menubar=no,resizable=no,scrollbars=no,status=no,width=400,height=300");
(function look_up() {
if(localStorage.getItem('user_signed_in')) {
go_on();
} else {
setTimeout(look_up, 500)
}
}());
function go_on() {
...
}
refer page:
localStorage.setItem('user_signed_in', true);
window.close();
Keep in mind that the refer page has to be on the same domain as your main page.
And, don't be afraid of bad support for localstorage in other browsers,
but if you really want to support oldies, you can use cookies, I believe.
When a user clicks a sign in button on site1 a pop up is opened from site2.
I'm assuming your using window.open thru an iframe to do this, and that you have already figured out how to bypass most browsers spam blockers etc.
Since you are opening this pop up as a new window, you are now in control of that window, and you can actually send stuff back from the new window.
This will be somewhat pseudo code, but just to make an example!
Lets say a user signs in with a link looking something like this:
<a href="" onclick="window.popup=window.open('/twitter/login.php', 'Twitter login', 'width=450,height=500'"</a>
Your pop up can now be refferenced by window.popup, and inside window.popup the original page is now called the window.opener.
On the same site that opens the popup you have a function, like this:
document.handleLogin = function (returnedDataFromPopup) {
console.log(returnedDataFromPopup);
}
After the user has logged in with oAuth, you need to redirect to a new page, this is explained in both the oAuth and Twitter guides, and you need to make that redirect happen inside the popup, and then capture the information from the login on that page and send it back to the original document and the handleLogin function.
Depending on what your using, in most PHP implentations you do something like this to get the data from the login, and this is of course after doing all the token and consumer key stuff:
$userinfo = $oAuth->getAttributes(); //or something similar, depends
So when redirecting from Twitter to a new page, the new page would look something like:
<? php
$userinfo = $oAuth->getAttributes();
?>
<script type="text/javascript">
window.opener.document.handleLogin(<?php echo json_encode($userinfo) ?>);
window.close();
</script>
This will actually run the handleLogin() function on the page that opened the popup, and it will send the userinfo from the popup to that function on the original page and then close the popup window.
I've used this technique with oAuth, OpenID, Google etc. and it works just fine without any need for local storage, cookies or page refresh at all, since you are in control of the popup window you can send information back and forth and you could even change the adress of the popup from the opening document on the fly if you wanted by doing something like this:
window.popup.location.href = 'google.com';
This is handy in some cases, for instance OpenID will by default close the popup and redirect the document.opener to the page specified, this is not what you want, and to overcome this you would have to open the popup on some random page, preferably an empty page that you control, and then redirect the popup's href to Twitter immediately after the popup is opened.
It all looks very complicated, but it is doable, and if you get this far, you now have the data, an all you have to do is somehow push it to site1 thru the iframe that holds site2. As pushing is'nt really possible without websockets or some sort of event driven server, like node.js, you will probably have to rely on long polling or something else, there are many ways to do this, and I'm sure you'll figure it out, but if you have some control over scripts running on site1, and you obviously have control over site2, then you can actually access some data thru an iframe with a little javascript, but I've never actually done that so I do not know exactly how it works.
It's not really relevant, but I don't really see why it would be useful for someone to login thru your site with an iframe from some other site, and it all seems strange to me, but thats up to you to figure out.