I am using a Facebook login method in my code on page load, but when I execute this code, the pop-up blocker closes the Facebook permission window.
How can I open this window with Javascript without needing to make an exception in the pop-up blocker?
Below is my code:
FB.login(function(response)
{
if(response.session!=null)
{
window.location.href='http://example.com';
}
},
{ perms: 'email,user_birthday,publish_stream' });
You can do something like -
var uri = encodeURI('http://example.com');
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location.href=uri;
} else {
window.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri="+uri+"&response_type=token");
}
This will just redirect directly instead of opening a pop-up
This is specifically denied in the documentation:
"You should only call this on a user event as it opens a popup. Most browsers block popups, unless they were initiated from a user event, such as a click on a button or a link."
It's also simply poor UX.
There'd be no point in popup blockers existing if you could just code around them. You'll either need to find a method that doesn't use a popup or require some user interaction with the browser to open the popup.
Yeah you need to call it with a user event, but strictly the onclick event, not any other:
Login <!-- works -->
Login <!-- doesnt work -->
Login <!-- doesnt work -->
If you try to open a popup automatically then there is a high possibility that popup blockers will become activated, as far as I know, it has to be based on some User action, for example click of a button. Try to execute this code on click of a button, it should work.
Related
I am writing a library to get short lived tokens from facebook.I am simply making an iframe and opening the dialog inside. If user is signed in before theres no problem but if user will be prompted first time facebook blocks iframe my code is below how can i solve this problem .
function Facebook (params){
this.url="https://facebook.com/dialog/oauth"+params;
this.Get=function(){
var css="position:absolute;top:50%;left:50%;\
transform:translate(-50%,-50%);width:500px;height:300px;z-index:9999",
frame=document.createElement("iframe"),
url=this.url;
frame.setAttribute("style",css);
return {
pop:function(){
document.getElementsByTagName("body")[0].appendChild(frame);
alert(url);
frame.setAttribute("src",url);
}
}
}
}
I solved this by opening popup if the popup from a trusted event such as click browsers doesnt block it while trying from console anyway they will block
I want to put cookie to my page.
Here's the logic :
When I load the page, I want it to load a popup or bootstrap modal. But the modal only load once when the browser is active. And only will load again when the browser tab is closed or exits the browser application. I have used session to do this, but I prefer to use cookie for personal preferences.
Is there a way to do this with javascript?
I've tried with $(window).load(), and $(window).on('beforeunload',function());
Javascript :
<script type="text/javascript">
$(window).load(function () {
if( $.cookie('firstLoad') == 'unloaded' || $.cookie('firstLoad') == 'null' || $.cookie('firstLoad') == null ) {
$('#openLoading').modal('show');
var time_exp = 1;
$.cookie('firstLoad','loaded',{ expires: time_exp });
}
});
$(window).on('beforeunload', function (){
alert($.cookie('firstLoad'));
$.cookie('firstLoad','unloaded');
});
</script>
The problem is sometimes the app browser will execute location.reload() and will reset the cookie in some way and make the popup appear again.
Please provide solution, thanks.
PS : the var time_exp and expires : time_exp is a last resort if the unload doesn't work
The beforeunload event doesn't just fire when the tab is closed. It will fire whenever the user goes to a new page in the same tab, including a page on your site. So you are resetting your cookie every time the user navigates between pages.
There is no event you can use to tell you the user is leaving your site specifically. The closest you can do is not set an expires, so that the cookie will automatically be deleted when the browser exits.
You could put a close button in the modal, and set a cookie when it is clicked so you know the user has viewed the modal and you don't need to show it again for however long you decide.
Can I call window.open from confirm dialog box using javascript?
My Requirement:
In case browser pop up blocker was enabled means ,i want to open pop up window using window.open(); but it was not happening so that i have to show the confirmation message which is "Browser popup blocker was enabled, now pop up has been open". now i click 'OK', on that time i want to call window.open() function.
<html>
<body onload="openPopup();">
<head>
onload Popup Window
</head>
</body>
<script>
function openPopup () {
var href= 'http://google.com';
popUp = window.open(href, "_blank");
if (popUp === null || typeof popUp === 'undefined') {
var ret = confirm("this alert is displayed by Blocker, Continue to Open ?");
if(ret){
window.open(href,"_new");
}
} else {
popUp.focus();
}
}
</script>
Is it possible or is there any other way to handle this scenario?
No.
Pop-ups are generally only allowed following a user's click, and as you've already seen in your code onload usually won't allow it.
However, you could use your own UI, to create a custom confirmation box that the user can click on to open the pop-up. This will work, unless the browser's pop-up blocker is overzealous enough to block even click-to-open popups without prior confirmation within the browser itself.
I'm showing the pop-up window from the page. The popup has one page, which then redirects to another (LinkedIn authorization one, to be clear), and then, after the successful login, the initial authorization page is opened again.
I want to reload the parent page when the popup is closed, but cannot do this.
The code is the following:
function OpenAuthorizePopUp() {
var w = window.open("AuthorizePage.aspx", "PopUp", "width=450,height=540");
w.onunload = function () {
SubmitPage();
};
return false;
}
function SubmitPage() {
alert("SUBMIT!");
}
The issue here is that SubmitPage() function is called not when window is closed, but just after the popup is shown. I guess it's because of redirect inside the popup, and unload is raised when we move from the first page.
Is there a way to catch the actual moment when the window is closed in this case?
So the flow of the popup goes like this:
1. Your page -> 2. LinkedIn Page -> 3. Your Page
Can you change the URL that LinkedIn sends you back to (3.) ? If so, have LinkedIn send you back to a page that has window.onunload = window.parent.SubmitPage; on it.
If you can't- ie, LinkedIn always sends you back to the first page- make the third page test for a successful connection to LinkedIn and if it's present, execute window.onunload = window.parent.SubmitPage;.
A possible improvement to your idea would be to just have the "success" page call window.parent.SubmitPage(); and then window.close(); since you won't need the popup anymore.
Found the solution. Instead of accessing parent window with window.parent, wrote
opener.location.reload(true);
And it works.
I am developing a facebook iFrame application which would be embedded inside a facebook page. I have chosen iFrame as FBML is deprecated by facebook.
My application is ready but I am facing a small problem
when FB.login is called, a popup window appears. My application requirement is that whenever its loaded, it should check whether user is authorized or not, if not then show a Dialog asking for extended permission/login
Problem:
The Pop-up is in form of a new window which Safari blocks by default because window is open through javascript and not via click, I want it to appear as a lightbox/shadow which facebook typically shows for fbml applications
I read at http://developers.facebook.com/blog/post/312 that
Blockquote
In order to make a more consistent and secure user experience when connecting accounts, we're changing the behavior of the dialog when a user connects accounts between your site and Facebook when the user is already logged in to Facebook. Previously, the Connect with Facebook dialog appeared in an IFrame "lightbox" within the browser window. After tomorrow's weekly code push, the dialog will pop up in a separate browser window, with an address bar, which matches the user login flow when the user is not logged in to Facebook and tries to connect accounts with your site. This will also make it easier for users to identify that the URL is trustworthy and coming from Facebook.
Blockquote
But this new feature is clearly not helping me out.
Any workaround for this?
My code:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({ appId : '161077430577043', status : true, cookie : true, xfbml : true });
FB.getLoginStatus(function(response) {
// alert("response: " + response.session);
if (response.session) {
// alert("response of getlogin status, permissions: " + response.perms);
login();
}
else{
document.getElementById('loginStatus').innerHTML = "Login and Grant Permission";
logMeIn();
}
});
function logMeIn(){
FB.login(function(response) {
// alert("login!");
if (response.session) {
// alert("Granted permissions: " + response.perms);
login();
} else {
// alert("not logged in");
}
}, {perms:'read_stream,publish_stream,offline_access,friends_birthday,email'});
}
function login(){
FB.api('/me', function(response) {
document.getElementById('login').innerHTML="Welcome " + response.name;
});
getFriendsData();
}
function getFriendsData(){
// fetches data from Graph API
}
</script>
I figured out how to solve this.
Now I am using FBML prompt generated through PHP and signed_request for permissions.
I missed an important point that once you have permissions granted, they will be available irrespective of the sdk being used. i.e. get permission from fbml and use them with php
I think for security reasons they don't allow the login flow to go inside of an iframe. The only way around it is to redirect the user to the login page (replacing your current page). This can be done server-side or client-side.
If you fire the FB.login() call from a click event the new window shouldn't be blocked by the browser.
Something like:
<button onclick="logMeIn();">Log in with Facebook</button>
And script:
function logMeIn() {
FB.login(...);
}
From Facebook documentation (link):
As noted in the reference docs for this function, it results in a popup window showing the Login dialog, and therefore should only be invoked as a result of someone clicking an HTML button (so that the popup isn't blocked by browsers).