41

I have a page with dynamic data loaded by some ajax and lots of javascript.

the page contains a list from which the user can choose and each selected value loads new data to the page.

One of these data items is a url provided to an iframe.

I use jQuery BBQ: Back Button & Query Library to simulate the browser-back behavior.

All works well besides the fact that when i click the back button for the first time the iframe goes back to its previous location and then I need to click back again to make the page go back.

Is there a way to disable the iframe's back behavior?

Mithun Sreedharan
  • 49,883
  • 70
  • 181
  • 236
kfiroo
  • 1,913
  • 2
  • 15
  • 18
  • I'm interested in the answer to this; my understanding (possibly incorrect) is that the page has little or no control over what the browser does with the "back" button. Or the "forward" button for that matter. – Pointy Feb 11 '10 at 17:14

6 Answers6

79

I've found the answer to my problem guess it could be useful for others out there.

The problem was with the way i assigned new URLs to my Iframe, i used Jquery so it looked something like that: 

$('#myIFrame').attr('src',newUrl);

When assigning the URL in that manner it adds a new entry to the browser's list of visited URLs to go back to.
That wasn't the desired behavior, so after some googling i found that you can assign a new URL to an Iframe object without adding it to the 'back-list', it looks like that: 

var frame = $('#myIFrame')[0];  
frame.contentWindow.location.replace(newUrl);

This way my back button behave exactly as expected.

btw, i got my answer from here.

Hope this was helpful to you as it was to me.

kfiroo
  • 1,913
  • 2
  • 15
  • 18
  • 10
    This only works for iframe with the same domain as the website it is embedded on. Will not work for cross-domain iframes. – tjmehta Mar 07 '13 at 04:32
  • How can i use this code when i submit form with target="myIFrame" to point to iframe?? – ShivarajRH Dec 02 '13 at 08:59
7

The accepted answer does not seem to work if you try to set a cross-domain URL for the IFrame. As a workaround, I detached the IFrame from the DOM before setting the src (using jQuery).

// remove IFrame from DOM before setting source, 
// to prevent adding entries to browser history
var newUrl = 'http://www.example.com';
var iFrame = $('#myIFrame');
var iFrameParent = iFrame.parent();

iFrame.remove();
iFrame.attr('src', newUrl);
iFrameParent.append(iFrame);
Georg Patscheider
  • 9,357
  • 1
  • 26
  • 36
1

I suggest you create a hyperlink within your iframe. call it 'Back' and put a href as javascript:history.back(-1)That's the best you can do I think.

Mateen Kadwaikar
  • 403
  • 4
  • 17
0

Basically you need to prevent the addition of new history entries in the iframe, history.replaceState introduced in HTML5 would work in most cases.

history.pushState(state, title, url);
Igor G.
  • 6,955
  • 6
  • 26
  • 26
  • 6
    Inside the iframe? How do I tell the iframe to do that if `src="http:/google.com"` for example? – trusktr Jan 10 '18 at 07:55
0

I manage cross domain iframe inside bootstrap modal, the only solution working for me is to put the following code inside the head of the each iframe pages:

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
      history.go(1);
    };

This will not work for everyone as you need to have the control of the iframe content, in addition it break the history chain of the parent window

Daphoque
  • 4,421
  • 1
  • 20
  • 31
-5

No, this is entirely up to the browser.

jumpin 88
  • 7
  • 2