Javascript cookie to distinguish between the page hits/views? - javascript

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.

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 can I make an one-user input have consequences in the behaviour of all page?

Is a very simple page, that have some buttons redirecting to external links. That external links have to change arbitrarely when certain people decides it.
I was wondering about making a login screen in other page and depending which user logs in, set the link writting it in a txt file that would be recovered by the main page. Don't need security so i just would make the user go to the other page and login and that would change the link in a txt file hosted in the same directory that the index.html is.
The problem is that i cannot make that idea (writing a .txt in the project folder) with JavaScript (or i think so), and i don't think that using a database worth it (neither want to because i read that would have to use node.js or something like that and i really don't know those tecnologies, only some python and sql server -that is in fact not supported by my hosting service-), cause are just 3 people associated to 1 link each. I can easily make that task with python but don't know how to call it from JS and neither if Ajax request would be useful for this case.
I hope someone can help me!
edit - the changes have to apply for the page itself not in the user session, so everyone who enters see the page with the changes
edit 2 - absolutely all the info (users and links) are always the same, doesnt change so i can put it in variables, are just 4 or 5 so i can easily use an array, the only thing that i would have to register is which one to pick (since it depends on who decides it).
IT seems you want to use some sort of client side storage across different html pages - for that, you can use cookies, localSotrage or sessionStorage.

HTML5 History API not working after refreshing the URL

I'm building very simple SPA 'wannabe' site /for a friend and for exercise/. The idea is simple - 3 static pages: home, portfolio, contact. I've made the links from the portfolio and contact to change the url and I just need to make some functions to change the content. So far so good, but when I refresh the page when I'm on /contact or /portfolio "page" i get error "Cannot GET /portfolio". Same happens when I try to copy and paste the link in other browser. The purpose of the site is to be able to send links and open em. Could this be achieved without server-side?
No.
You must change have a server-side, because this mode requires URL rewriting. You have to rewrite all your requests to the index of your app.
You can disable HTML5 location mode (and use hash instead).

Twitter Cards using Backbone's HTML5 History

I'm working on a web app which uses Backbone's HTML5 History option. In order to avoid having to code everything on the client and on the server, I'm using this method to route every request to index.html
I was wondering if there is a way to get Twitter Cards to work with this setup, as currently it can't read the page as everything is loaded in dynamically with Javascript.
I was thinking about using User Agents to detect whether it's the TwitterBot, and if it is, serving a static version of the page with the required meta-tags. Would this work?
Thanks.
Yes.
At one job we did this for all the SEO/search/facebook stuff etc.
We would sniff the user-agent, and if it was one of the following sniffers
Facebook Open Graph
Google
Bing
Twitter
Yandex
(a few others I can't remember)
we would redirect to a special page that was written to dump all the relevant data about the page for SEO purposes into a nicely formatted (but completely unstyled) page.
This allowed us to retain our google index position and proper facebook sharing even though our site was a total single-page app in backbone.
Yes, serving a specific page for Twitterbot with the right meta data markup will work.
You can test your results while developing using the card's preview tool.
https://dev.twitter.com/docs/cards/preview (with your static URL or just the tags).

Javascript file modifying an html file that it is not called from? Jquery Selectors

Is its possible to have a javascript file that is aware of two different HTML files? And how would I do this?
I would like to be able to have two pages. index.html and pictures.html. I have an index.js that changes the display properties of index.html (it puts data based on people into tables and makes it look nice). I would like this current index.js file also to be able to edit the pictures.html file and change information there. index.html would link to pictures.html to display pictures of a person (based on the persons name I have them saved smith1.jpg, smith2.jpg, reagan2.jpg, ect). Is there anyway that this javascript file could get DOM elements based on their id or class of the second file (pictures.html) even though it "lives in" index.html? When i say lives in it is called at the top of the index.html page.
thanks
A script can access elements on another page if it was loaded in some way of connection.
For example, if you make a popup using var popup = window.open(), the return value will contain a reference to the opened popup and this allows access to elements within the popup. E.g. popup.document.getElementById('something'). Pages loaded within frames, iframes and such have similar ways of access.
So yes, if your page loads the second page its script can work there as well. I suggest avoiding this beyond opening and closing popups from a script though; a script should stay inside the box of its page and if it needs to do larger operations on another page, that usually means that you need to change your code architecture a bit.
You'll need to explore server-side programming to accomplish your goal.
http://en.wikipedia.org/wiki/Server-side_scripting
...Or you could write a client-side application in which "pages" are separate views of one actual page or are generated from backing data structures. If you want persistance of what is created/edited, you'll still need server-side programming.
You can use the html5 (group of technologies) postmessage api as well.. This allows you to send messages to another page, and in that page you define an event handler that knows how to handle the message.
This also works across domains.
Here is a blog with an example I just randomly found via google:
http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
Not possible on the client side if editing the actual HTML file is your goal. If getting pictures to show up depending on stuff a user does on another page is all you care about then there are lots of options.
You can pass small sets of data like stuff the user entered into tables via cookies for accessing the right sets of image files in a pre-established scheme. This would actually persist until a user cleared out cookies.
You could wrap both pages in same-domain iframe elements with the parent element containing just the JS. This would allow you to persist data between pages and react to iframe load events but like everything in client-side JS, it's all gone when you reload the page.
Newer browsers have working file access objects that aren't total security nightmares. These are new and non-standard enough that it would take some doing to make it work for multiple browsers. This could be used to save files containing info that the user would probably have to be prompted to upload when they return to the site.
If the data's not sensitive you could get creative and use another service to stash collections of data. Use a twitter API to tweet data to some publicly visible page of a twitter account (check the Terms of Service if you're doing anything more than an isolated class project here). Then do an Ajax get request on whatever URL it's publicly visible at and parse the HTML for your twitter data.
Other stuff I'd look into: dataURIs, html5 local storage.
Note: None of these are approaches I would seriously consider for a professional site where the data was expected to be persistent or in any way secure regardless of where a user accesses it from.

Categories

Resources