when iframe page refreshes it redirect to the main page not to the same page

Question

My website uses the iframe to load content inside div element. My problem is when a page is refresh it redirect to the main page not to the current page.

Here is the part of the code.

     <a  href="promotion.jsp">Promotion</a>

And here is the javascript function I used.

$(document).ready(function(){

        var url;
        $('a').click(function(e){

            e.preventDefault();
            url = $(this).attr('href');
            if(undefined != url){
                window.frames["page-wrapper"].src = url;
                clickFront();
            }
        });

        $("button").click(function() {
            checkUrlandId(url,this.id);         
        });

    });

clickFront() is function that enable and disable some top menu bar button functionalities.

So when I click menu item(Approvals) page changed. After that page refreshes it redirect to the main page not to the current page.

Here are two screenshots. First one is before clicking the menu item and second one is after clicking the menu item.

First Image

Second Image

After clicking the menu item url is not changing.

I read that we can use cookies or javascript localstorage to save the url to do this? Can someone help me... I'm a newbie to the js.

clicking on an anchor tag will load a new page, unless you **prevent** this **Default** behaviour — Jaromanda X, Jan 13 '17 at 08:06
I don't want to load a new page. The side menu is static but the right side of the page is dynamic — , Jan 13 '17 at 08:42
I'm a newbie to js. So can someone help me to use cookies to page refresh. — , Jan 16 '17 at 06:37

mplungjan · Accepted Answer · 2017-01-16T07:54:02.733

1

I would expect window.frames["page-wrapper"].src = url; to be
window.frames["page-wrapper"].location = url;

Anyway. If you need the iFrame change to survive a refresh and a bookmark, you need to use the hash in the page:

$(function(){
    var url = location.hash?decodeURIComponent(hash.substring(1)):"";
    if (url) window.frames["page-wrapper"].location = url;
    $('a').click(function(e){
        e.preventDefault();
        url = $(this).attr('href');
        if(undefined != url){
            location.hash=encodeURIComponent(url);
            window.frames["page-wrapper"].location = url;
            clickFront();
        }
    });

});

If URLs are external, you really need target.

Localstorage

$(function(){
    var url = localStorage.getItem("url");
    if (url) window.frames["page-wrapper"].location = url;
    $('a').click(function(e){
        e.preventDefault();
        url = $(this).attr('href');
        if(undefined != url){
            window.frames["page-wrapper"].location = url;
            localStorage.setItem("url",url);
            clickFront();
        }
    });

});

edited Jan 16 '17 at 07:54

answered Jan 13 '17 at 07:57

mplungjan

169,008
28
173
236

Using above method my side menu is disappear. I'm using iframe here for a reason. That is my side menu remain same and other parts are changed. – Jan 13 '17 at 08:34
this is not working. According to thiis URL is changing but the page is not loading... – Jan 16 '17 at 06:36
I would need to see it in action and check the console – mplungjan Jan 16 '17 at 06:38
I read that js localstorge can save the url and when page refreshes it can use saved url or we can use cookies. I'm a newbie to js. so can u help me... – Jan 16 '17 at 07:29
see update..... – mplungjan Jan 16 '17 at 07:54
Now I can't go to the main page. When I click the home button to go to the main page it's remain in the current page. And also if I closed the tab and run the project again it redirects to the last visited page not to the main page... – Jan 16 '17 at 09:29
I have no way of knowing why. Perhaps I have a typo, perhaps you pasted it wrong. I cannot test this code for you because you have other code at your site – mplungjan Jan 16 '17 at 10:59
Here is the line for redirect to the main page. but this button is not working. It refreshes page... – Jan 16 '17 at 11:17
Why is that not type=button ? – mplungjan Jan 16 '17 at 11:51
So I used this. But still not working. – Jan 16 '17 at 12:12
`type="button" onclick="location.href='../GUI/home.jsp';"` will load the homepage. If not, look in the console for errors – mplungjan Jan 16 '17 at 12:27
I did this and it works perfectly now. . Then I wrote a js function to load the home page. Before load it I clear the localstorage. function home (){ localStorage.clear(); document.location.href='home.jsp'; } – Jan 16 '17 at 12:46
Thanks for your help... – Jan 16 '17 at 12:48
And I change your function a bit. I put window.frames["page-wrapper"].src = url; instead of window.frames["page-wrapper"].location = url; – Jan 16 '17 at 12:55
I am surprised. I would expect location since it is a window object when you get it by name and an iframe object when you get it by getElementById or ByName[0] – mplungjan Jan 16 '17 at 12:59

score 1 · Answer 2 · answered Jan 13 '17 at 08:02

Look at sample below, everything works as expected

var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function(a) {
  a.onclick = function(e) {
    e.preventDefault();
    window.frames.frame1.src = a.getAttribute('href');
  }
});

<ul>
  <li>
    <a href="http://stackoverflow.com">Stackoverflow main page</a>
  </li>
  <li>
    <a href="http://stackoverflow.com/users/2308005/medet-tleukabiluly?tab=profile">My profile</a>
  </li>
  <li>
    <a href="http://stackoverflow.com/questions/41629581/node-js-obtain-access-token">Question: Node.js obtain access token</a>
  </li>
</ul>
<hr />
<iframe id="frame1" width="500" height="200" src="http://stackoverflow.com/questions/41629578/when-iframe-page-refreshes-it-redirect-to-the-same-page-not-to-the-main-page"></iframe>

i need load external html files inside #page-wrapper frame – Jan 13 '17 at 08:40 — , Jan 13 '17 at 08:40

when iframe page refreshes it redirect to the main page not to the same page

2 Answers2