CODEWITHSUNDEEP
javascripthtmlurlbrowsersingle-page-application
Sara Bi
Sara Bi

Reputation: 15

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?

Upvotes: 0

Views: 82

Answers (1)

Hira Kumar Maharjan
Hira Kumar Maharjan

Reputation: 278

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>

Upvotes: 1

Related Questions