1

Jquery is quite heavy and bloated. Unfortunately I do not know how to code "real" javascript.

I have this code:

$(document).ready(function () {
    if(window.navigator.standalone){
        $('a').click(function(e) {
            e.preventDefault();
            $("body").load(this.href);
        });
    }
}); 

Could somebody help me along the way to transform this into real javascript? how would i replace load()? Thanks a lot :)

1
  • 6
    If you find jquery bloated, wait to see what your "real" javascript will look like, once adapted to run on all platforms :) Commented Jun 14, 2011 at 19:21

2 Answers 2

3

Not terribly complicated:

window.onload= function() {
    if (!navigator.standalone) return;
    for (var i= document.links.length; i-->0;) {
        document.links[i].onclick= function() {
            var req= new XMLHttpRequest();
            req.onreadystatechange= function() {
                if (this.readyState!==4) return;
                document.body.innerHTML= this.responseText;
            };
            req.open('GET', this.href, true);
            req.send();
            return false;
        };
    }
};

To make XMLHttpRequest work on IE6, if that's a concern for you at all, you would need to define this first:

if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
    window.XMLHttpRequest= function() {
       return new ActiveXObject('MSXML2.XMLHttp');
    };
}

That's really all there is to it.

But for general-purpose web pages you should never do this; not in native JavaScript and not in jQuery. loading content into the existing page subverts the browser's navigational abilities and replaces them with nothing. The back and forward buttons now don't work any more. The user can't bookmark their favourite pages, or send links to anyone else. This is a re-invention of the worst usability problems of frames, and shouldn't be done on the open web without a lot of extra work to implement HTML5 history-navigation and hashbang fallback nav for search engines.

Sign up to request clarification or add additional context in comments.

5 Comments

I would caution against putting too much stock in the "you should never do this" comment. There are many cases where you want to load additional content without reloading an entire page. History is relevant when loading entirely new content, but perhaps not so much when loading things like comments, details, additional images, etc.
I dunno, I'd like to be able to link to a comment or particular details; sending someone a ‘link’ which says “example.com, then click on ‘open details’, then open the third comment down” sucks. There is a good way to handle this with scripting, but it involves some tricky history and hashbang code (or a plugin that does such for you). Most people aren't bothering with that, and ending up with unnavigable pages.
here it only works on a fullscreen view on the iphone :). SO there is no navigation which is why there is "navigator.standalone".
@bobince It doesn't work after the ajax request. How would I reset the click handler so that it works again after the request? :s. thanks again for your help.
oh i just make it a function and call it after generating the innerHTML
2

Isn't jQuery real javascript for you? If you mean raw javascript without any framework then you need a XmlHttpRequest (prepare yourself for writing sheer amount of code, also prepare yourself for this code not working identically among different browsers, getting errors, headaches, etc ...).

Conclusion: use jQuery and be happy.

4 Comments

yes I mean raw javascript. It's for a mobile framework. And to just add jquery for 5 lines is a little bit stupid in my opinion :).
@SnippetSpace, 5 lines??? Believe me, what awaits you if you don't use jQuery is the real horror :-) We have all gone through it. Once you go through it as well you will probably appreciate people's efforts into creating js frameworks such as jQuery. If you are worried about performance or something, serve it from Google CDN, chances are more than humongous that clients already have it cached and they won't need to download it again as so many sites already use it out there.
Haha, classic. Prepare yourself for lots of crazy mobile browser behavior that jQuery already handles.
It is an article of faith that jQuery solves browser problems, but what it actually does for XMLHttpRequest is not very much. Most of the bug workarounds are for issues with cross-domain requests, which doesn't seem to be an issue here. I'm all for avoiding importing what is a very large and complicated library, if the only thing you're using it for is a trivial XMLHttpRequest.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.