Single Page Application Issues

Question

I'm creating a single page application by loading HTML pages inside div element on button click events.

For example :

function loadHome(){
         document.getElementById("home-pane").innerHTML='<object type="text/html" data="pages/home.html"></object>';                 
         $("#about-pane").hide();
         $("#blog-pane").hide();
         $("#forum-pane").hide();
         $("#contact-pane").hide();
         $("#home-pane").show();  
};

Because of it, the URL of application will not change. I'm afraid I would not qualify for Google Ads in case of Single Page Application. Please suggest me an alternative solution so that I would be able to generate different URLs on different click events (Home, About, Contact, Blog etc.) and would able to access those pages via separate links.

I'm kind of new to all these stuff, but I would love to implement all your suggestions and make an extra source of income.

Use pushState: https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries — Rory McCrossan, Apr 27 '17 at 20:04
Possible duplicate of [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) — empiric, Apr 27 '17 at 20:04

score 0 · Answer 1 · answered Apr 27 '17 at 20:18

As suggested by @Rory in the comments, you can use the History API

What I would do is, in onclick, just pushState a new URL to the history Then attach a listener that fires whenever the URL changes. That listener would look at the URL and decide based on it, which 'page' to render.

Single Page Application Issues

1 Answers1