Redirecting Prior To Page Display (AngularJS) - javascript

Got an AngularJS app set up, where some views require you to be logged in. Other views are publicly available. Ideally, the user would be redirected to the login page (which is currently outside the scope of the app) before any of the view is displayed.
Since it has to redirect depending on the hash-value, this can't be done back-end. I have the redirecting working alright within the js, although there is the issue that using $window.location.href does not seem to prevent the javascript from running. So you still get that quick flash of what was on the page.
Note, all info is validated back-end as well, so the user can't see anything they're not meant to. It's just a matter of UX. Would prefer not have the page quickly flash before redirecting.
Is there any way to tell the browser to stop executing after $window.location.href?
EDIT:
While not an optimal solution, I've decided to have the <body> hidden by default. Then I use an if-else to either redirect or show the body.
I'm still interested, if anyone can think of a better solution?

Related

Allowing to load web pages directly from browser and navigating through browser buttons?

Is it good to allow webpages to load directly from browser url field or browser back buttons?
Our webapplication is working fine if any user navigates through home page, but some users are directly accessing the web url in the browser and raising issues that it is not working fine.
Can you please suggest do we need to support loading the urls through browser or allow to navigate through home page?
Some banking websites gives a warning saying to do not use browser urls or browser buttons to navigate between pages i.e. they will warn to do not press browser back button to navigate to previous page etc., so is it correct idea then?
Yes! Ideally, you should let your users use the links directly and have the website function as usually does. This is ideal if they use, for example, their "recent webpages" functionality on their browser, they want to revisit some page from their history, or they visit the webpage so often it appears on their recommended webpages list (This is a functionality present in some browsers, such as Chrome).
A good way to achieve this is query parameters.
Overall, you should expect your user to access the website from other places than the homepage, and have some logic to handle it in such a webpage that the website doesn't become broken.
However, there are some situations where it's just impossible to have the website work as expected without some previous action done by the user (For example, filling a form or being authenticated. In some cases, your user might need to be authenticated to visit a specific link, and ideally, because of security, user sessions should eventually expire). In this case, having safeguards that redirect the user to some previous page where they can begin their flow again (Such as, the login page) is better than nothing.
How to implement this depends a lot on the stack being used (Programming navigation varies between React and Angular. You might not even be using a library or framework at all!). More context would be needed to suggest an approach.

How to keep js function run between different pages?

I wonder how sites like SoundCloud work: you play a song and it keeps playing even if you move to another page without stopping
Any suggestions?
The only way I can think of is to build your app, or at least the parts of it that need to bo continuous, as a single page.
In practice, this means that only one HTML document is loaded. When, say, a link is pressed, the browser action is intercepted and prevented and the browser behaviour is faked by javascript.
Consider a website consisting of pages A and B. Normally, when a link pointing to B is activated, the URL is changed and the browser calls the server, requesting B. In a single-page application, however, this is interrupted by a javascript function, which changes the URL using the History API, and then displays B in a way that doesn't require a new document being synchronously fetched from the server.
There's a couple of ways to do it.
Navigate to a new page
If you do that, a whole new JS execution context is created for the new page, so you can't keep the function running. What you can do however is to "resume" execution in the new page. For this you need to save the state of the old page either on the server or in some client storage that persists between page changes (cookies, localStorage, etc).
Fake navigation
This is the most user friendly way - you turn your website into a web application. You no longer have multiple pages, so when user wants to change what he sees in the browser (like go to a new song), the app simply changes the appropriate area with the desired content. This is a complex topic that should probably be researched in itself, not explained in a SO answer. Go ahead and google "single page application" and you should find plenty of resources for it.
Technically you never change the page when you are using souncloud. You always stay on the same page and only the parts get changed which are actually changing, so you never reload the whole page. That's why they can keep the music playing: They just never remove or change the actual player. If you are wondering why the URL in your browser is changing if you never leave the page: They manipulate your history entries.
If you are interested in creating an application that behaves similar you should checkout frameworks like Ember.js or Angular.js. TodoMVC Gives a nice overview of those frameworks.

Facebook login without javascript

i have a page tab where users press like and then using the js sdk i ask to grant the app for some permissions..
in order this to work on mobile devices since page-tab are not available, i have used mobile-detect..
the problem is that i don't want at mobile version the js popup but the native login window..
this can happen using the login without javascript
https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#confirm
the problem is that i m completely lost, at the redirect after the login..
header("Location: https://www.facebook.com/dialog/oauth? client_id=487296798007389&redirect_uri=URL_TO_REDIRECT_TO/success.php&scope=email,friends_l ikes&response_type=token");
if i use the response_type code i get a code from which i can't get access token..
if i use the response_type token i get a access token with a hash tag on top and i don't know at all how to handle this..
can someone give me some quite lines on how should this be treated in order to retrieve userid
do i need to set my app to sth else apart from only page tab? since the mobile version will be accessible from my own domain?
i found these two very usefull
with this i do a php login that it server me better in a specific occassion than js..
https://developers.facebook.com/docs/php/howto/profilewithgraphapi/
and this
Facebook login without pop-up?
it let me use js, but instead of login (that would pop up on mobile) i could use the redirect link and have similar result..
however, i noticed a case in which on some devices the second case ended in infinite loops without obvious reason

Javascript cookie to distinguish between the page hits/views?

Here's the thing, I have created a mobile web-app having 6 pages only (main.html, venue.html, program.html... , aboutus.html). Ss you guys can see main.html is the main landing page. We also have native mobile apps for Blackberry and iPhone and these native apps use some of my pages in their widgets. Now the issue is I need to distinguish between the page views or hits in such a way so that I could get a clear idea about from where my page is being requested or viewed and then hide/show some stuff depending upon from where the page is being requested. One interesting thing, as mentioned above main.html is the main landing page of web-version so we never use this page in our native apps. So I need to create a cookie on main.html and wanna check that cookie value on each of 6 pages. By following this approach what I want to do is e.g.
Let us say: If I got a hit from native app for venue.html, then in this case I will not get any cookie value as this user has not visited the main.html and reverse of this if some user has used my web-app/version then he/she has to go through the main.html (user is forced by us to view the main.html page first then others).
So after exploring everything I need you guys help to: 1. How to create such kind of cookie in javascript on main.html? 2. how to check that cookie value on rest of pages to know from where that page is being accessed?
Note: I don't want to store any expiry date/time in cookie and in setcookie method I want to set some constant value instead asking user to set some dynamic stuff through some alert dialog.
Any code snippet will highly be appreciated
Doesn't sound like you are doing any pre-processing on the serving side of the equation. Meaning all your pages are static pages, you might want to look into pre-processing your pages using ASP, PHP, Perl or whatever other programming your server allows. By doing so, you open up the option of tracking movement of the user within your application.

How can I tell if my page is set as the user's homepage?

Is there any way I can detect when my page has been set as the user's homepage in their browser?
I'm most interested in something in javascript, but I'd be happy to hear about other approaches as well.
Edit: I'm not looking for anything sneaky. I'm wondering if there is anything that is explicitly allowed through the browsers to find out this information.
There isn't likely to be a foolproof method, as that's an intrusion into the privacy of the user.
One thing that comes to mind is checking for a referrer. If the user arrived at your page without following a link, they a) typed the url, b) followed a bookmark, or c) have your page set as their homepage. But that's about the best I can do.
Nope. You can tell if they got to your page by following a link or not. Check the referrer. However, the browser going to your page as the home page will not appear any different than the user typing in your page or using a bookmark.
Mozilla/Firefox has a window.home() method which loads the user's home page. This method could be used (in an iframe, maybe) combined with server access logging, to see if the site's home page is instantly requested loaded by the current user.
However, other browsers don't seem to support this javascript method.
Simple solution, you shouldn't be checking if you or anyone else's site is set as the user's homepage. If they want it as their homepage, they'll make it so.
However, if you've got some Javascript that will check their email and see if they've sent links to your site to their friends or colleagues, I'd be very interested in that functionality ;-)

Categories

Resources