Thursday, September 6, 2007

Avoding browser history when changing iframe src

We ran into a problem where we needed to have an iframe who's source needed to be changed dynamically by a javascript based on some user data. The issue was that Internet Explorer saved the iframe's old url in the history. The simple solution is to dynamically write the iframe with it's real src instead of having an iframe on the page and then changing it's src.

You do it like this:


var iframeHeaderCell = document.getElementById('wheretoputheiframe');
var dynamicURL = 'http://...' //your url
var iframeHeader = document.createElement('IFRAME');
iframeHeader.id = 'iframeHeader';
iframeHeader.src = dynamicURL ;
iframeHeader.width = ...;
iframeHeader.height = ...;
iframeHeader.scrolling = 'no';
iframeHeader.frameBorder = 0;
iframeHeader.align = 'center';
iframeHeader.valign='top'
iframeHeader.marginwidth = 0;
iframeHeader.marginheight = 0;
iframeHeader.hspace = 0;
iframeHeader.vspace = 0;
iframeHeaderCell.appendChild(iframeHeader);


Elementry, my dear Watson.

13 comments:

  1. Isn't it more useful to just append the timestamp to the url in query string ?

    ReplyDelete
  2. Nop. The problem is that if your page have an <iframe src=something> and then you change that src to something else, the browser (sometimes) remebers the first src in the history, and we wanted to avoid that.

    The (sometimes) is mostly related to what the original page was, what the new page is, and whether SSL is used or not. Also see for more details.

    ReplyDelete
  3. Oh, you were talking about the back button in the browser, i thought it was about cache :)

    ReplyDelete
  4. Great Idea...Sherlock...Thanks a lot

    ReplyDelete
  5. Really kool trick, i'm looking for this.

    thx a lot xD.

    ReplyDelete
  6. Clever technique. Thanks for the tip, we were having the same issue w/ the iframe writing to browser history. Thanks!

    ReplyDelete
  7. I'm using iFrames to simulate an AJAX system since the pure AJAX system I was using often lagged and/or crashed. While this post didn't relate exactly to what I was looking for, it gave me the idea I needed. Thanks :)

    ReplyDelete
  8. Excellent info. Definitely fixed the issue we were having. Thanks!

    ReplyDelete
  9. it did work well for me where I wanted to avoid setting of browser history on all browsers except IE, any ideas or other workarounds?

    ReplyDelete
  10. @anonymous, please elaborate the IE issue..

    ReplyDelete
  11. You saved my day! I had some thought to solve this way. You just confirmed that it works. Thanks!

    ReplyDelete
  12. what about an iframe that may contain other frames or iframes? If I don't have control over the iframes within the original iframe then am I out of luck?

    ReplyDelete

[Due to much spam, comments are now moderated and will be posted after review]