[SOLVED] Change page without opening link

[DarkxPunk]

Hey everyone, So I am playing around with iOS web apps and I found out that you can hide the browser top bar and bottom bar by using a cool meta tag and then saving the page to the home screen. Now awesome right? Well if you change pages it opens up the browser (thats no fun). Is it possible using JavaScript for it to change the page without opening the link? Thanks for any pointers.Peace

Edited November 17, 2012 by DarkxPunk

[Craig Hopson]

i dont know if this is correct or not but it does work i found

<input type=button onClick="location.href='afile.php'" value='SOMETHING'>

[DarkxPunk]

Thank you! That was exactly right. Now to expand a little... So now that I have this understood I want to pull the correct page based upon the button clicked. I have set up an array:

var link[] = (Object) Array('Home' => 'index.php','About ORMT' => 'about.php','Our RMTs' => 'rmts.php','Get Involved' => 'involved.php','Contact Us' => 'contact.php',);// I bet this is all wrong >.<

Now what needs to happen is onclick compare link to the innerHTML of the buttons and then output the correct page into location.href so location.href = link. Thanks for any help. I have been playing around and can't wrap the loops around my head...

Edited November 4, 2012 by DarkxPunk

[DarkxPunk]

Figured it out, gotta use switch, if anyone can find a more compact and dynamic way of doing this let me know.

function changePage(link){	var nav = link.innerHTML;	switch(nav)	{		case 'HOME':			location.href = 'index.php';			break;		case 'ABOUT ORMT':			location.href = 'about.php';			break;		case 'OUR RMTs':			location.href = 'rmts.php';			break;		case 'GET INVOLVED':			location.href = 'involved.php';			break;		case 'CONTACT US':			location.href = 'contact.php';			break;	}}

The reason I need it dynamic is I want it so when any anchor is pressed instead of executing the href it will just change the location.href. Maybe it will be easier replacing all hrefs with onclick location.href = page... Idk. Thoughts?

Edited November 6, 2012 by DarkxPunk

[DarkxPunk]

Okay so I made it dynamic, now how can I make a function that when the page loads all anchors get onclick="changePage(this)" added to them. This is because users will add content on their own so when they put a link it needs to change over to the onclick.Ideas?Here is the code

function changePage(link){	var aHref = link.href;	link.href = null;	location.href = aHref;}

I also need something to tell it to not do it on certain links. Thanks!

Edited November 6, 2012 by DarkxPunk

[ShadowMage]

Well, you can use the getElementsByTagName function to get all anchors in the page:

var anchors = document.getElementsByTagName('a');

And then loop through them and assign the handler:

for (var x=0, y=anchors.length; x<y; x++) {  anchors[x].onclick = function() { changePage(this); }}

And for excluding certain links, you could add a class name to them and within your loop check to see if the anchor has the given class name before assigning the handler to it:

<a href='www.google.com' class='no_redirect'>Google</a>

for (var x=0, y=anchors.length; x<y; x++) {  if (anchors[x].className.search(/\s*no_redirect\s*/) == -1) {	anchors[x].onclick = function() { changePage(this); }  }}

There could be errors, as this was written off the top of my head and not tested, but that's the gist of it.

Edited November 6, 2012 by ShadowMage

[DarkxPunk]

Thank you very much! It's funny last night I was on a roll but never found the getElementByTagName method. Thanks a bunch!

[ShadowMage]

Thank you very much! It's funny last night I was on a roll but never found the getElementByTagName method. Thanks a bunch!

It was probably a typo, but just to be sure its getElementsByTagName.

[DarkxPunk]

It keeps looping and I can't figure out why... Page just reloads like mad.

[ShadowMage]

Code?

[DarkxPunk]

I'm using what you gave me, I either have the page reload constantly or I make slight changes and have the page load undefined. Never changes the anchors.

[justsomeguy]

It sounds like your code to add the handler is executing the changePage function instead of assigning it to the handler.

[DarkxPunk]

Indeed but why? What's wrong with his code?

[justsomeguy]

I don't see that problem with the code in post 6, he did it correctly there.

[ShadowMage]

I don't see that problem with the code in post 6, he did it correctly there.

Which is why I asked for your code, DarkxPunk. You may have a typo or something that is preventing things from working properly. There may also be other code conflicting with something in the code I provided. We can't know that unless we see what you have.

[DarkxPunk]

Okay idk what I did differently, I repeated like last time and copy and pasted the code and now it's working -_-Thanks again!

[DarkxPunk]

Is it possible to search the href for something like .php then apply the on click otherwise don't apply the on click?I tried href.search(".php") but it does not work...Here is some other code I am trying, it does not exclude anchors not linking to ormt.ca though... Why?

var domain = "ormt.ca";for (i = 0; i < a.length; i++){	var link = a[i].href	if (link.indexOf(domain))	{		a[i].onclick = function() {changePage(this);}	}}

Okay so I solved it... But I don't understand how, can anyone explain how that != -1 works? When I read it I see if blah is not equal to -1 than do blah, but instead it's if blah is not equal to -1 do blah? Or am I crazy?

var domain = "ormt.ca";for (i = 0; i < a.length; i++){	var link = a[i].href	if (link.indexOf(domain) != -1)	{		a[i].onclick = function() {changePage(this);}	}}

Edited November 10, 2012 by DarkxPunk

[ShadowMage]

The difference is in the way that values are converted to boolean. In if statement only cares about boolean values when determining which block to execute, so any expression in the parens is converted to a boolean value. Some values are "truthy" and some are "falsey". Obviously, boolean true is truthy and false is falsey. The ones that aren't so obvious are the values 0, '' (empty string), and null (I think). Those values are falsey. Anything else is truthy. The indexOf function returns an integer referring to the position of the substring or -1 if the substring isn't found. Since any integer other than 0 is considered truthy, the if statement will evaluate to true for all cases except when the substring is at the beginning of the string being searched (thus returning 0, a falsey value). When you compare the return value to another value using != (or any other comparison operator) you are sending a boolean value to the if statement. Does that all make sense?

[DarkxPunk]

I understand now. That explanation is really really going to help me in future projects. Your explanation should be put in the tutorial of js cause they don't outline that well there.