javascript - How to prevent iframe affecting browser history - Stack Overflow

admin管理员组

文章数量:1313769

I'm encountering a browser history issue when working on a web project.

Theres an iframe in my page, which I would change its src value using Javascript. The whole thing works just fine except this change of src would affect the browser history.

I do not want to push the browser history, when I change the iframe url. I'm expecting that the user would leave the whole base page and go to the previous location when clicking on the back button, rather than just going back on the changed iframe.

What I've tried:

• remove the former iframe, and replace with a new one having the new src value
• use replaceWith() method from jQuery
• use iframe.contentWindow.location.replace() to replace the iframe location

Both methods above behaved nothing different than just changing the src directly on my Safari browser. The back button is still affected.

Haven't tested yet on other browsers, but I assume other webkit browsers would be the same.

I'm encountering a browser history issue when working on a web project.

Theres an iframe in my page, which I would change its src value using Javascript. The whole thing works just fine except this change of src would affect the browser history.

I do not want to push the browser history, when I change the iframe url. I'm expecting that the user would leave the whole base page and go to the previous location when clicking on the back button, rather than just going back on the changed iframe.

What I've tried:

• remove the former iframe, and replace with a new one having the new src value
• use replaceWith() method from jQuery
• use iframe.contentWindow.location.replace() to replace the iframe location

Both methods above behaved nothing different than just changing the src directly on my Safari browser. The back button is still affected.

Haven't tested yet on other browsers, but I assume other webkit browsers would be the same.

• javascript
• html

Share Improve this question Follow edited Dec 7, 2014 at 10:01 TwilightSun asked Dec 7, 2014 at 9:59 TwilightSunTwilightSun 2,33522 gold badges1818 silver badges2828 bronze badges 10

• stackoverflow./questions/2305069/… – Bharath R Commented Dec 7, 2014 at 10:04
• Yes, or stackoverflow./questions/18951691/… – Roy Wasse Commented Dec 7, 2014 at 10:05
• @BharathR tried replace already. And using replaceHistory gives me a SecurityError – TwilightSun Commented Dec 7, 2014 at 10:15
• 2 @roywasse I'm not trying to go back on that iframe. I'm trying to eliminate it's effect on the browser history. – TwilightSun Commented Dec 7, 2014 at 10:16
• 1 Did you find a solution? I'm having the same issue with using jsPDF and an iframe to show live PDF updates as the user edits. I guess I will put an extra back button on the page for now. The other ment links don't seem to be what I need. – user6811 Commented Aug 4, 2015 at 2:21

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 1

I think there is something else in your code that we're not seeing, because .contentWindow.location.replace works in my testing.

https://codepen.io/tmdesigned/pen/WJEqON

I also tried that on a blank html page outside of codePen, thinking the codepen editor was affecting the oute. It continued to work.

I've pasted it as a snippet below for the code, although I don't think SO allows iFrames to work.

$( 'html' ).on( 'click', '.change-iframe', function() {
    $( '#dynamic-iframe' )[0].contentWindow.location.replace( $( this ).data( 'src' ) );
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="dynamic-iframe" width="560" height="315" src="https://www.youtube./embed/XlqoPpLMdwY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 

<div>
    <button class="change-iframe" data-src="https://www.youtube./embed/0RIrdFfy9t4">Another</button>
    <button class="change-iframe" data-src="https://www.youtube./embed/QMQbAoTLJX8">Another</button>
    <button class="change-iframe" data-src="https://www.youtube./embed/wppBd-52LT0">Another</button>
</div>

本文标签： javascriptHow to prevent iframe affecting browser historyStack Overflow