IFrame causing back button issues

Question

I am currently having an issue with IE8/7 (I do not have a choice, I have to add support for these before anyone moans) where IFrames with youtube videos are causing an issue with adding extra URLs into the history so when hitting back I am having to do it 2-3 times before actually getting to go back, my current solution seems to work in newer browsers but not the two I am having an issue with, current solution is:

<script type="text/javascript">
$(document).ready(function () {
    $("iframe").each(function () {
        var ifr_source = $(this).attr('src');
        if (ifr_source.indexOf("youtube") != -1) {
            var parent = $(this).parent();
            var ifr = $(this).detach();
            var wmode = "wmode=transparent";
            if (ifr_source.indexOf('?') != -1) {
                var getQString = ifr_source.split('?');
                var oldString = getQString[1];
                var newString = getQString[0];
                $(this).attr('src', newString + '?' + wmode + '&' + oldString);
            }
            else $(this).attr('src', ifr_source + '?' + wmode);
            ifr.appendTo($(parent));
        }
    });
});

Answer 1

Every time you change the iFrame's src attribute, the iFrame registers a new entry in the window's history.

There is a way to prevent this. Instead of using .attr('src'... use:

$("iframe").each(function () {
    (this.contentWindow || this.documentWindow).location.replace('your new url');
});

Hope this helps!

Answer 2

just answering my own question here...

Simply adding this into the mix

                var frame.src = 'javascript:parent.getFrameHTML()'

Has resolved the issue!