'Single Page Application using injector - Javascrip reload the page

I am making a single page application using injection function :

<html>
<body>
<a href="javascript:injector('../../url1')"> link1 </a>
<a href="javascript:injector('../../url2')"> link2 </a>
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>

<script>
function injector(url) {
 window.parent.document.getElementById("iframe").src = url;
}
</script>

There are 2 urls in this simple example. I can save the one that has been clicked on local storage. But:

  1. how do I explain in JavaScript (When the page is refreshed, use the last used url automatically)
  2. How to deal with going back to a previous page (a previous url). Is there a better way to deal with navigation in single page application using JS?
javascripthtmlurlbrowsersingle-page-application


Solution 1:[1]

here, whenever you click on link it will load url in iframe and when you do fresh it will load from localstorage itself.

<html>
<body>
<a href="javascript:injector('https://merolagani.com/')"> link1 </a>
<a href="javascript:injector('https://bizmandu.com/')"> link2 </a>
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>

<script>
    var iframe = document.querySelector('iframe#iframe');
    iframe.src=localStorage.getItem('url');
    function injector(url) {
        iframe.src = url;
        localStorage.setItem('url',url);
    }
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hira Kumar Maharjan

Related Questions