Test browser history before going back via javascript? - javascript

I'm playing around with using some javascript to add extra functionality to a back button on my website. Right now I have a set of javascript that looks like this:
$(".back-link a").live("click", function(){
history.go(-1);
return false;
});
Now, it works great but I'm trying to make it as bulletproof as possible and one issue I foresee is that if someone lands on a project page and hasn't come to it via my home page then going back in their history one step will take them off my site. Obviously, this isn't what I want.
My guess is it would be a simple case of doing an if-statement but I'm not sure what or how to test for it. I suppose I could just test to make sure the base of the URL is my site but I'm not sure how.
Any tips or directions would be great.

No, it's not at simple as that. You can use the history collection to go back or forward, but you can't get the URLs in the history.
The only information that you can obtain about where the user comes from is the HTTP_REFERER string in the request header, but you have to use server side code to get that.

Related

Redirect if not coming from a referring domain

I am wanting to set up a javascript to accomplish the following:
A user opens up a bookmarked webpage and the script checks whether or not it came from a referring domain (say, site.com) and if not redirects them automatically to anothersite.com. The goal is so that only when users come from the anothersite.com site will the site.com page come up. Hope this makes sense.
I would normally use PHP for this but can't for this project so we're stuck doing this with javascript.
Look into document.referrer to get the referrer's URL, extract the domain from it and then validate.
I didn't quite get the part of "opens up a bookmarked" since it has been said that knowing that much is not easily accomplished Is there a way to know if someone has bookmarked your website?
..but to inspect where it came from I would look into How do you get the previous url in Javascript?
plus then make your own if else stuff and use window.location.href = "your_site_url"; to direct him the page you wanted, job done!

Facebook makes their AJAX calls through iframe?

I want to implement AJAX like facebook, so my sites can be really fast too. After weeks of research and also knowing about bigPipe (which is not ajax).
so the only thing left was how they are pulling other requests like going to page/profile, I opened up firebug and was just checking things there for what I get if I click on different profiles. But the problem is, firebug doen'tt record any such request and but still page gets loaded with AJAX and changes the HTML also, firebug does show change on html.
So I'm wondering, if they are using iframe to block firebug to see the request or what? Because I want to know how much data they pull on each request. Is it the complete page or only a part of page, because page layout changes as well, depending on the page it is (for example: groups, page, profile, ...).
I would be really grateful if a pro gives some feedback on this, because i cant find it anywhere for weeks.
The reason they use iframe, usually its security. iframes are like new tabs, there is no communication between your page and the iframe facebook page. The iframe has its own cookies and session, so really you need to think about it like another window rather than part of your own page (except for the obvious fact that the output is shown within your page).
That said - the developer mode in chrome does show you the communications to and from the iframe.
When I click on user's profile at facebook, then in Firebug I clearly see how request for data happens, and how div's content changing.
So, what is the question about?
After click on some user profile, Facebook does following GET request:
http://www.facebook.com/ajax/hovercard/user.php?id=100000655044XXX&__a=1
This request's response is a complex JS data, which contain all necessary information to build a new page. There is a array of profile's friends (with names, avatar thumbnails links, etc), array of the profile last entries (again, with thumbnails URLs, annotations, etc.).
There is no magic, no something like code hiding or obfuscation. =)
Looking at face book through google chromes inspector they use ajax to request files the give back javascript which is then used to make any changes to the page.
I don't know why/wether Facebook uses IFRAMEs to asynchroneously load data but I guess there is no special reason behind that. We used IFRAMEs too but now switched to XMLHttpRequest for our projects because it's more flexible. Perhaps the IFRAME method works better on (much) older browsers, but even IE6 supports XMLHttpRequest fine.
Anyway, I'm certain that there is no performance advantage when using IFRAMEs. If you need fast asynchroneous data loading to dynamically update your page, go with XMLHttpRequest since any modern browsers supports it and it's fast as HTTP can be.
If you know about bigPipe then you will be able to understand that,
As you have read about big pipe their response look like this :-
<script type="text/javascript"> bigpipe.onPageArrive({ 'css' : '', '__html' : ' ' }); </script>
So if they ajax then they will not able to use bigpipe, mean if they use ajax and one server they flush buffer, on client there will no effect of that, the ajax oncomplete only will call when complete data received and connection closed, In other words they will not able to use their one of the best page speed technique there,
but what if they use iframe for ajax,, this make point,, they can use their bigpipe in iframe and server will send data like this :-
<script type="text/javascript"> parent.bigpipe.onPageArrive({ 'some' : 'some' });
so server can flush buffer and as soon as buffer will clear, browser will get that, that was not possible in ajax case.
Important :-
They use iframe only when page url change, mean when a new page need to be downloaded that contains the pagelets, for other request like some popup box or notifications etc they simple send ajax request.
All informations are unofficial, Actually i was researching on that, so i found,
( I m not a native english speaker, sorry for spelling and grammer mistakes! )
when you click on different profile, facebook doesn't use ajax for loading the profile
you simple open a new link plain old html... but maybe I misunderstood you

Changing Javascript History

When I load my php page I append some data. For instance MyPage.php?value=something.
As expected, when I go back and forth using the back button, it always loads with that same data appended. I don't want that. I want that after the page loads, I should be able to change the history to store only MyPage.php WITHOUT the appended data.So now when I would use the back button it would load MyPage.php only. How can I do this - javascript, jquery, php , anything???
If there is a way to do that without touching the history object, thats also fine. I'm just assumng it'll take some history tweaking. I'm also OK if it takes tweaking on the client or server side.
As far as I know, it is not possible to tweak the history like that, nor is it a good way to deal with this.
You could use a cookie to determine when a page gets loaded more than twice, or store the data in a session variable instead, and delete it once your processing is done.
I assume the data is appended by using GET method. Using POST will not append text after MyPage.php but still can pass data to the page.
The history is the history. It's a bit of a hack to go changing that (and you will probably have other issues down the road if you do).
It is better to either have NO querystring at all, and use js or server-side logic to determine the action, or to have js or server-side logic to ignore the second request.
If you are fine with tweaking the history then you can probably look in to this.
history.replaceState({}, document.title, "MyPage.php");
This will rewrite the current window.location to "MyPage.php" without page refresh.

Updating facebook status with message from a Javascript variable

Is there an easy way to let users update their status on Facebook with a message I have in a JavaScript variable? I know there's a URL you can use to share a link, which looks like:
testlink
That doesn't fill in a status update when it takes them to the share page. Is there a way I can have that pre-filled, or have their status automatically updated?
Thanks!
Edit: Not quite what I'm going for. I can use PHP if necessary (although I have very little experience with it), but I don't want to have to bug users with allowing an application, or have to deal with actually writing a facebook app. I just want to give users a premade status update, so all they have to do is click the 'share' button. Thanks again!
Edit 2: So the api looks promising, but a little complicated for me. It looks like it would involve getting permission from the user to set their status, and possibly something about setting up a cross-communications channel to let my site communicate with facebooks. Assuming I can do that, how do I go about using the Facebook Javascript api? I get the code (user_setStatus looks easy enough), but how do I tell my script that I'm using Facebook's api? Thanks again...again!
Try this:
http://www.facebook.com/connect/prompt_feed.php?&message=my%20awesome%20status
[EDIT]
Link is not working please update it.
Is the facebook javascript API not what you're looking for? It seems to expose the entire REST-ful API as a javascript library.
users_setStatus(...) looks promising.
Not sure if you're using PHP but here's a link that shows you how to use the Facebook API to update the status. You could call a page with Ajax from Javascript, passing in the variable and have that posted to the Facebook status message.
http://fbcookbook.ofhas.in/2009/02/07/facebook-reveals-status-api-how-to-use-it/
Using just mcqwerty solution you'll get an annoying resize screen effect.
But, you can add a parameter in order to avoid this flickering. Display touch will avoid this.
https://www.facebook.com/connect/prompt_feed.php?display=touch&message=Hiall
Here is working example which requires application ID, but fully working and it is easy to implement:
<a href="http://www.facebook.com/dialog/feed?app_id=123050457758183&link=http://www.build.server.com&picture=http://fbrell.com/f8.jpg&
name=Some%20Encoded&Message=Reference%20Documentation&
description=Using%20Dialogs%20to%20interact%20with%20users.&
redirect_uri=https://arapskirjecnik.web44.net/"> Share with FB</a>
see more here
here is the way which works and it doesn't requires facebook application id:
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=Title&p[summary]=summary&p[url]=www.build.server.com&p[images][0]=http://fbrell.com/f8.jpg','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">Insert text or an image here.</a>
As you can see from above code you can enter custom title, summary, link and images.
and if you want to automate, to share current link, youst replace this part of the code in upper example:
p[url]='+ document.URL +'&p[images]

When using back button AJAX results have been lost

So I've set up a pagination system similar to Twitter's where where 20 results are shown and the user can click a link to show the next twenty or all results. The number of results shown can be controlled by a parameter at the end of the URL however, this isn't updated with AJAX so if the user clicks on one of the results and then chooses to go back they have to start back at only 20 results.
One thought I've had is if I update the URL when while I'm pulling in the results with AJAX it should—I hope—enable users to move back and forth without losing how many results are shown.
Is this actually possible or have I got things completely wrong?
Also, how would I go about changing the URL? I have a way to edit the URL with javascript and have it be a variable but I'm not sure how to apply that variable to the URL.
Any help here would be great!
A side note: I'm using jQuery's load() function to do all my AJAX.
Not mentioned in the duplicate threads, but useful nonetheless: Really Simple History (RSH).
This would be the answer I would put here:
Browser back button and dynamic elements
You can't actually change the url of the page from javascript without reloading the page.
You may wish to consider using cookies instead. By setting a client cookie you could "remember" how many results that user likes to see.
A good page on javascript cookies.
The answer for this question will be more or less the same as my answers for these questions:
How to show Ajax requests in URL?
How does Gmail handle back/forward in rich JavaScript?
In summary, two projects that you'll probably want to look at which explain the whole hashchange process and using it with ajax are:
jQuery History (using hashes to manage your pages state and bind to changes to update your page).
jQuery Ajaxy (ajax extension for jQuery History, to allow for complete ajax websites while being completely unobtrusive and gracefully degradable).
First 3 results google returns:
first
second
third
I'll eat my shorts if none of them are useful. ^^
And yeah - you can't change URL through JS.

Categories

Resources