I'm using oAuth to login or sign up using gmail account and decided to use popup window to do it. I found a snippet here which describes the process. But I can't understand how I'll be able to get the values or code if the user logged in with his email.
I can open the modal by this:
//Authorization popup window code
$.oauthpopup = function(options)
{
options.windowName = options.windowName || 'ConnectWithOAuth'; // should not include space for IE
options.windowOptions = options.windowOptions || 'location=0,status=0,width=800,height=400';
options.callback = options.callback || function(){ window.location.reload(); };
var that = this;
log(options.path);
that._oauthWindow = window.open(options.path, options.windowName, options.windowOptions);
that._oauthInterval = window.setInterval(function(){
if (that._oauthWindow.closed) {
window.clearInterval(that._oauthInterval);
options.callback();
}
}, 1000);
};
And use that as follows:
$.oauthpopup({
path: urltoopen,
callback: function()
{
log('callback');
//do callback stuff
}
});
But now, I'm wondering how to auto close the popup and pass parameters from popup window to the main window.
Related
var inFormOrLink;
$('a').on('click', function () { inFormOrLink = true; });
$('form').on('submit', function () { inFormOrLink = true; });
$(window).on('beforeunload', function (eventObject) {
var returnValue = undefined;
if (!inFormOrLink) {
returnValue = "Do you really want to close?";
}
if (returnValue != undefined) {
eventObject.returnValue = returnValue;
return returnValue;
}
});
Ref : Browser close event
I tried to execute the above mentioned code in Chrome Version 65.0.3325.181
it is working properly i.e popup does not open while redirecting or submitting form,
i want to show popup only when user close the tab, sometimes browser shows the popup but sometimes tab gets closed without showing popup.
I don't know why it is happening.
I have a twitter autentication on my angularjs web site. The problem I came up with is that when I press "Sign in using twitter" the pop up window with twitter signing in content should appear, but this pop up is blocked. Browsing google didn't give any useful results. Here some of my code:
HTML:
<a ng-show="!user.twitterUserLogged" ng-click="TwitterLogIn()" ... >
<i class="fa fa-twitter-square"></i></a>
controller:
$scope.TwitterLogIn = function() {
if(!$scope.user.twitterUserLogged){
TwitterTweetManager.getToken().then(function(token) {
$scope.user.TwitterToken = token;
var url = 'https://api.twitter.com/oauth/authenticate?oauth_token=',
params = 'location=0,status=0,width=800,height=600';
var twitter_window = window.open(url + $scope.user.TwitterToken.oauth_token,"twitter_window",params);
//if (twitter_window) {
var interval = window.setInterval(function() {
if (twitter_window.closed) {
window.clearInterval(interval);
$scope.TwitterLoginFinish();
}
}, 1000);
//}
});
}
};
Thank You!
Found some information about window.open() function. Is is true, that pop-up blockers will allow only onClick event? Because I have ng-click in my case. Could it be the core of a problem?
I found what the problem is. It was about asynchronous event on my ng-click. I was getting a token from server on my click event, in this case pop-up blockers will block your popping window. So now I'm getting a token before my event like this:
var TwitterToken = TwitterTweetManager.getToken().$object;
And my click event:
$scope.TwitterLogIn = function() {
if(!$scope.user.twitterUserLogged && TwitterToken){
$scope.user.TwitterToken = TwitterToken;
var url = 'https://api.twitter.com/oauth/authenticate?oauth_token=',
params = 'location=0,status=0,width=800,height=600';
var twitter_window = window.open(url + $scope.user.TwitterToken.oauth_token,"twitter_window",params);
var interval = window.setInterval(function() {
if (twitter_window.closed) {
window.clearInterval(interval);
$scope.TwitterLoginFinish();
}
}, 1000);
}
};
Rewriting the question -
I am trying to make a page on which if user leave the page (either to other link/website or closing window/tab) I want to show the onbeforeunload handeler saying we have a great offer for you? and if user choose to leave the page it should do the normal propogation but if he choose to stay on the page I need him to redirect it to offer page redirection is important, no compromise. For testing lets redirect to google.com
I made a program as follows -
var stayonthis = true;
var a;
function load() {
window.onbeforeunload = function(e) {
if(stayonthis){
a = setTimeout('window.location.href="http://google.com";',100);
stayonthis = false;
return "Do you really want to leave now?";
}
else {
clearTimeout(a);
}
};
window.onunload = function(e) {
clearTimeout(a);
};
}
window.onload = load;
but the problem is that if he click on the link to yahoo.com and choose to leave the page he is not going to yahoo but to google instead :(
Help Me !! Thanks in Advance
here is the fiddle code
here how you can test because onbeforeunload does not work on iframe well
This solution works in all cases, using back browser button, setting new url in address bar or use links.
What i have found is that triggering onbeforeunload handler doesn't show the dialog attached to onbeforeunload handler.
In this case (when triggering is needed), use a confirm box to show the user message. This workaround is tested in chrome/firefox and IE (7 to 10)
http://jsfiddle.net/W3vUB/4/show
http://jsfiddle.net/W3vUB/4/
EDIT: set DEMO on codepen, apparently jsFiddle doesn't like this snippet(?!)
BTW, using bing.com due to google not allowing no more content being displayed inside iframe.
http://codepen.io/anon/pen/dYKKbZ
var a, b = false,
c = "http://bing.com";
function triggerEvent(el, type) {
if ((el[type] || false) && typeof el[type] == 'function') {
el[type](el);
}
}
$(function () {
$('a:not([href^=#])').on('click', function (e) {
e.preventDefault();
if (confirm("Do you really want to leave now?")) c = this.href;
triggerEvent(window, 'onbeforeunload');
});
});
window.onbeforeunload = function (e) {
if (b) return;
a = setTimeout(function () {
b = true;
window.location.href = c;
c = "http://bing.com";
console.log(c);
}, 500);
return "Do you really want to leave now?";
}
window.onunload = function () {
clearTimeout(a);
}
It's better to Check it local.
Check out the comments and try this: LIVE DEMO
var linkClick=false;
document.onclick = function(e)
{
linkClick = true;
var elemntTagName = e.target.tagName;
if(elemntTagName=='A')
{
e.target.getAttribute("href");
if(!confirm('Are your sure you want to leave?'))
{
window.location.href = "http://google.com";
console.log("http://google.com");
}
else
{
window.location.href = e.target.getAttribute("href");
console.log(e.target.getAttribute("href"));
}
return false;
}
}
function OnBeforeUnLoad ()
{
return "Are you sure?";
linkClick=false;
window.location.href = "http://google.com";
console.log("http://google.com");
}
And change your html code to this:
<body onbeforeunload="if(linkClick == false) {return OnBeforeUnLoad()}">
try it
</body>
After playing a while with this problem I did the following. It seems to work but it's not very reliable. The biggest issue is that the timed out function needs to bridge a large enough timespan for the browser to make a connection to the url in the link's href attribute.
jsfiddle to demonstrate. I used bing.com instead of google.com because of X-Frame-Options: SAMEORIGIN
var F = function(){}; // empty function
var offerUrl = 'http://bing.com';
var url;
var handler = function(e) {
timeout = setTimeout(function () {
console.log('location.assign');
location.assign(offerUrl);
/*
* This value makes or breaks it.
* You need enough time so the browser can make the connection to
* the clicked links href else it will still redirect to the offer url.
*/
}, 1400);
// important!
window.onbeforeunload = F;
console.info('handler');
return 'Do you wan\'t to leave now?';
};
window.onbeforeunload = handler;
Try the following, (adds a global function that checks the state all the time though).
var redirected=false;
$(window).bind('beforeunload', function(e){
if(redirected)
return;
var orgLoc=window.location.href;
$(window).bind('focus.unloadev',function(e){
if(redirected==true)
return;
$(window).unbind('focus.unloadev');
window.setTimeout(function(){
if(window.location.href!=orgLoc)
return;
console.log('redirect...');
window.location.replace('http://google.com');
},6000);
redirected=true;
});
console.log('before2');
return "okdoky2";
});
$(window).unload(function(e){console.log('unloading...');redirected=true;});
<script>
function endSession() {
// Browser or Broswer tab is closed
// Write code here
alert('Browser or Broswer tab closed');
}
</script>
<body onpagehide="endSession();">
I think you're confused about the progress of events, on before unload the page is still interacting, the return method is like a shortcut for return "confirm()", the return of the confirm however cannot be handled at all, so you can not really investigate the response of the user and decide upon it which way to go, the response is going to be immediately carried out as "yes" leave page, or "no" don't leave page...
Notice that you have already changed the source of the url to Google before you prompt user, this action, cannot be undone... unless maybe, you can setimeout to something like 5 seconds (but then if the user isn't quick enough it won't pick up his answer)
Edit: I've just made it a 5000 time lapse and it always goes to Yahoo! Never picks up the google change at all.
I need to differentiate between user driven close of a popup window using X close button and close through code.
var win= window.showModelessDialog("http://localhost/test/test.aspx",'google,....);
//Some manipulations
//Manipulation ends
if(win!=null && win.open)
{
win.close();
}
Now I have full access over test.aspx and test.aspx.cs.I have a onbeforeunload method defined in test.aspx page which will be called either way I close the window(X close or my code gets executed)I basically want to differentiate my X close and programmatic close so that I can do some backend manipulations
Something like this perhaps:
var MyPopup = {
_win : null,
_userClosingWindow : true,
open : function() {
var _this = this;
this._win = window.open(...);
this._win.onbeforeunload = function() {
if( _this._userClosingWindow ) {
// closed by user
}
else {
// closed in code
}
};
},
close : function() {
this._userClosingWindow = false;
this._win.close();
}
};
Then you can use MyPopup.open() and MyPopup.close() and still know when the close function is called or when the popup is closed by the user.
Use Model Popup & include "OK" & "Cancel" Button.
Now you can handle both the "OK" & "Cancel" Button Events.
you can use:
AjaxControlToolkit - ModalPopup
jQuery UI - Dialog
// parent
function closePopup(win) {
win.close();
// do the magic stuff...
}
// popup (test.aspx)
function closeMe() {
self.opener.closePopup(window);
}
Update
As of your comment, just check the closed property of the popup. If it is false, the popup is still open, otherwise it has already been closed
if (win.closed === false) {
win.close();
// do magic stuff here
}
I have a jsp file which calls another jsp file opening it as a showmodal dialog window.
Say file1.jsp calls file2.jsp through file1.js.
File1.jsp-->File1.js (respective js files)
File2.jsp-->File2.js(respective js files)
Now to handleonclose in File2.jsp I added a function in File2.js.
When I hit close window but choose option as cancel, instead of just showing the old window.
It shows a modal window ontop of the existing modal window. Why is this happening. Am I missing something obvious.
What i expect to happen: When I choose Close but click cancel, nothing should happen.
File2.js function:
function handleOnClose() {
var resultsDoc = document.frames('searchBuffer').document;
if (event.clientY < 0) {
var bool = confirm('Are you sure you want to close the window ?');
if (!bool) { //Issue occurs here
window.showModalDialog("File2.jsp", "", "dialogWidth:1000px;dialogHeight:650px");
}
else {
resultsDoc.all('searchResults').innerText = '';
document.someSearch.submit();
}
}
window.returnValue = 'Discard';
}
Modified File2.js function:
function handleOnClose() {
var resultsDoc = document.frames('searchBuffer').document;
if (event.clientY < 0) {
var bool = confirm('Are you sure you want to close the window ?');
if (!bool) { //Issue occurs here
//*******removed the showmodal dialog window call
window.returnValue = 'Sorry';
}
else {
resultsDoc.all('searchResults').innerText = '';
document.someSearch.submit();
window.returnValue = 'Discard';
}
}
}
On the calling js (file1.js) I check if return value is "Discard" if so I refresh the page.
Otherwise I call the showmodal window again. My result is stored in the buffer so retrieval isn't a problem. Works like a charm