I have a home page, and I want to navigate to other pages, say blog or gallery, but without the URL in the address bar to change. I know it's possible on server side, but how to do in Javascript?
Here is my HTML/JS code:
//HTML
<ul>
<li><a onclick="openPage('contact.html')">Contact Us</a></li>
<li><a onclick="openPage('blog.html')">Blog</a></li>
<li><a onclick="openPage('gallery.html')">Gallery</a></li>
</ul>
//Javascript
function openPage(url){
// All these will forward but will change the URL
//window.open(url);
//window.location.href=url;
//self.location=url;
//window.location.replace(url);
}
Initially, the URL will be http://something.com/mainpage.html
And it should stay the same even when navigating to any page.
This is a very simple example of what I have. So, is it possible on client side without server? If not, then what would be the simplest way to do it on server side? Assuming I'm using Java/JSF.
You will have to add hash # if you want to prevent page from reloading.
The css-tricks.com has an excellent screencast on that, have a look at:
Best Practices with Dynamic Content
please check this question in stackoverflow changing-the-url-without-reloading-the-page
I will give you a hint. You can then write the code on your own.
Using ajax, fetch the entire page you want to open. (I assume that they are on the same server.)
Then parse the html.responsetext & find the body.innerHTML of the fetched page.
then use document.body.innerHTML=fetched_body_innerHTML;
Change the document.title also in similar manner.
I am assuming that both pages will have same CSS (for consistency in looks), and quite possibly, same js files loaded.
If you have different set of CSS &/or js files on the 2 pages, you will need to create additional nodes & delete old script/link nodes. (However, the result will not be identical, since old JS was already loaded & body.onload will not be triggered after you change the innerHTML of the body.
Related
I'm going to be very specific.
I have a frontend...
http://www.eroticahub.site (not porn)
If you have javascript, it becomes... http://www.eroticahub.site/#!body=home [renders with jquery/ajax load]
If you don't have javascript, it remains...
http://www.eroticahub.site/
Then you click "Privacy" at the bottom.
If you have javascript, it loads the file /body/privacy.html into the main div and you get...
http://www.eroticahub.site/#!body=privacy [renders with jquery/ajax load]
If you don't have javascript, you just get... http://www.eroticahub.site/body/privacy_body.html
^ I'm just fetching the file that jquery/ajax is inserting into the template.
This isn't a very good solution. I want a page that never does a full refresh/reload but that is fully indexed by every major search engine.
Is it perhaps possible to make a command like this:
For each link in page,
if ( user_has_javascript )
return page_with_javascript;
else
return serverside_render( page_with_javascript );
That way any user who doesn't have javascript (web crawlers included) will get a pure html/css version of the page. I'm planning on using Ruby for my backend. Does anyone have a clean solution to this problem?
First make everything work with regular URLs and no JavaScript. You want your JS to be unobtrusive, so build it on top of a working, plain HTML + server side solution.
Next write JavaScript that fetches the data it needs from the server
and updates the document to match another of the pages.
That JavaScript should use pushState to change the URL to match the URL of the page from the server that you are generating locally with JavaScript.
NB: pushState replaces hashbang URIs. It is a standard designed for the use case you described (while hashbangs were an ugly hack).
Bind that JavaScript to your link click / form submit / etc event.
Add a listener for a popstate event so that when the user clicks Back you can restore the page to it's previous state.
Okay. Let's say a user goes straight to... eroticahub.site/privacy and then they click a link to go to eroticahub.site/legal The link looks like this:
<a href=eroticahub.site/legal.html onclick=function(){window.location.hash = 'legal.html';return false;}>
Link
</a>
So if the user has no javascript, they go to eroticahub.site/legal.html and request a whole new page from the server and if they do have javascript they go to eroticahub.site#legal.html and will not request a whole new page from the server.
The # will trigger a hash change event which will call a function with a big switch statement that will contain (window.location.hash === "legal.html") in it. This condition will trigger the loading of the snippets/legal.html html into the web page using jquery/ajax.
If the link goes to eroticahub.site/legal.html, the backend will deliver the same template it did for eroticahub.site/privacy.html, but with a different middle section containing words from snippets/privacy.html
If the user has javascript, the middle section is rendered the same as if the user does not have javascript. It is only when the user clicks a link that the distinction must be made whether or not they have javascript. The AJAX would have to load the dynamic content (#legal) on top of [replacing] the static content in the content div of eroticahub.site/privacy and then this would in tern be replaced by more html in the exact same div. A convention would have to be maintained such that:
<a href=eroticahub.site/legal.html onclick=function(){window.location.hash = 'legal.html';return false;}>
Link
</a>
<a href=eroticahub.site/privacy.html onclick=function(){window.location.hash = 'privacy.html';return false;}>
Link
</a>
<a href=eroticahub.site/user_content/stories.html onclick=function(){window.location.hash = 'user_content/stories.html';return false;}>
Link
</a>
etc.
We are working on a Bootstrap website to present our schoolwork. I have a fair understanding of the used html code, but I am having one problem.
To link to a specific tab/section within a page this link is used:
href="#tab"
I have copied the original index.html and thus created a second webpage. I'm able to link to this page using:
href="page2.html"
But I'm not able to link directly to a tab/section on that second page. I tried using href="page2.html/#tab" or "page2.html#tab" etc. But it doesn't work yet, I think I miss some fundamental knowledge about this coding.
Could anyone explain me how to get this working, in 'normal' language. There are several (older) solutions, but can't get them to work in the javascript files.
This should help...
http://codepen.io/mattsince87/pen/exByn
LINK -> <a id="link1" class="nav-section1" href="#section1">S1. Info</a>
Content -> <h1 id="section1">1. Info</h1>
You can use something like this as i have this thing running in my project. these will check the page if it contains the tabs then it will take the last value from the url of the page2 and will make it visible.
if($("#tabs").length)
{
var id = window.location.hash.substr(1);
$('#tabs a[href="#'+id+'"]').tab('show');
}
Ok, this is my problem... I have two pages. On the first page I have a header (h2) element on which I want to apply a border style. On the second page, there is only one link. When clicking on the link from the second page, to navigate to the first page, it should create a border on the first page around the h2 tag.
Any thoughts on how to do this? Is it possible to do it with regular JavaScript or jQuery?
Thanks!
No, JavaScript is client-side and for this you would require the server to remember if the link was clicked, possibly by recording this in a database or session variable.
That's of course if you're using the tradition model of a website, rather than loading pages already using pure JS.
It would be a pretty stupid way of doing it, but it is possible to do it client side. I would seriously recommend to do it server-side though.
On page 2, link back to page 1 with a hash:
Go back to page one and add a border
And on page 1, check if there's a hash:
if (window.location.hash === '#border') {
$('h2').addClass('withBorder');
}
I think if you are looking this kind of scenario you can achieve it with passing some hash to the url:
i passed a hash named 'second' in the second page url and put this script on second page
$(function(){
var url=window.location;
var hash = url.hash.substr(1);
if(hash == "second"){
$('h2').css('border','solid 1px red');
}
});
Checkout this if helps.
Well there is a way you could do this with JavaScript, although it's tricky and server side is a LOT easier. You would need to use some JavaScript to load different pages without refreshing the entire DOM. I do this with something called pjax. The way it works is to have each page act as a container to load all subsequent pages via ajax. By not doing a full page reload, any style changes you make on one page get carried over to other pages (this dose not survive an actual browser refresh).
I'm in the process of writing a website that includes a reasonably large gallery. First page of the gallery the user will be displayed a bunch of thumbnail images with a url of: website.com/gallery.php
When they click a thumbnail image, if javaScript is turned off it will follow the url in the href and go to a page called gallery.php?img=67. If javaScript is turned on the href click will not execute, instead it will perform an ajax request to display the larger image and some text about it. The url changes to gallery.php#!img=67. The back button will take you back to the thumbnails, pressing f5 will keep the big image displayed with the text. If someone copies the address with the #! and sends it to someone they will get the same image displayed (assuming the receiver has javaScript turned on).
My question is, have I sorted this out correctly for google to index the individual gallery pages? Will google index them twice, once with the ?img=67 and once with the #! and if so is that a bad thing? I'm using javaScript/Ajax to preload the larger images once the thumbnail page is loaded for speed. I've read a lot of backlash against using hasbang ajaxy things recently and wondering if you think can justify using it here?
Google will follow your links and index the ?img=67 pages, and will not index your #! pages, because it can't see those links. You can tell Google about those links by doing the following:
Add <meta name="fragment" content="!"> to the <head> of your document, and
Handle requests for /?_escaped_fragment_= by returning an "HTML Snapshot" of your page that has all your #! links in the <A> tags.
Also, to make the most of this feature, you should also handle requests for /?_escaped_fragment_=img=67 by returning an HTML snapshot page with the big image displayed. Remember, GoogleBot doesn't execute Javascript. Using the #! URL tells Google to retrieve an alternate version of the page (A version where #! has been replaced with ?_escaped_fragment_=) that should render without Javascript.
THe use of #! tags in URLs are in the news recently, with updates to a well known blog.
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs has a good description of what they are best used for - and when they can be bad. I think your use in a gallery is quite valid.
In short, a URL like http://lifehacker.com/#!5753509/hello-world... is rewritten by Google, and other compatible web-spiders as http://lifehacker.com/?_escaped_fragment_=5753509/hello-world...
Google may index them twice, but you can also use the canonical meta-tag to ensure it knows what the 'official' copy is.
Possible solution (as suggested in http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs) is to use regular links and translate them to #! in the OnClick() event. This ensures that the site displays regular links and not the shitty #!.
It does mean extra work for the server though, since the server needs to support both versions (the Ajax version and the regular version), but I think it worth it.These #! are so ugly..
I have a website that is 1 html file and uses javascript to hide tabbed pages.
The url gets rewritten with a # for the different pages to make them bookmark-able.
Is there a way to make the different pages show in search engine results? It would be good to have them show up as different pages there.
I have read the below doc, but I think that is just for dynamically generated ajax content, right?
http://code.google.com/web/ajaxcrawling/docs/getting-started.html
I read the page mentioned by you. That is for Ajax site. In your case it is not Ajax.
Another point as Jeff B has mentioned is that the chance is high that Google will index all content for each trick you use. In that case it would be bad as Google will get duplicate content. It will be not very bad as all content are from your site only.
Search Engine questions like this are very tricky and difficult to answer as no one know the exact functioning of Search Engine.
In my thinking you either recreate your pages as Ajax and follow the points mentioned in article you got. Or
Use a link for each tag with param. like page1.php?cat1, page1.php?cat2, etc.
and that only load content related to specific tag at a time.
The second solution is no different than implementing different page for each tab, but it can be easier to update in your case! and also all content are still accessible by both person and search engine at a place. Slowly search engine will index your each page with parameter. Remember, It is generally said that Google does not index pages with parameter but it is not true. Google does not index page with variable or id kind of parameter only. They index each page with popular parameters if page content changes.
Still your question is tricky and my suggestion is what comes to me after thinking much about it.
The problem seems to be that even if the different pages were indexed, they would all index the same content. This is because according to your explanation all of the content (including hidden) exists at load time.
If your tabs are links, you simply need to put the href in the link. Google should follow this link, while javascript-enabled browsers will execute your tab-switching code and not follow the link (if you coded it right).
However, the problem of all content being indexed for all pages still remains.
Modify your system like this:
Every link that changes the content of the current tab should have
as href attribute a subpage that contains the content of the tab
intended to appear -> this will be cached by Search Engines.
Those links should have binded JS actions that changes the content
of the current tab and also denies the redirecting that should have
been done by what's in the "href" attribute -> this will be shown to
the user