Geek Answers Handbook

Change iframe.src without entering the history object

I have an iframe on my webpage. I am changing the src property through javascript as follows:

document.getElementById('myiframe').src = 'http://vimeo.com/videoid1'; document.getElementById('myiframe').src = 'http://vimeo.com/videoid2'; document.getElementById('myiframe').src = 'http://vimeo.com/videoid3';

However, every time I do this, it is logged in the browser history. Therefore, every time I return to the browser window, the contents of the iframe go from videoid3 to videoid2 to videoid1. If I return again, the whole page will return.

I would like to change the iframe src using javascript WITHOUT registering an entry in the browser history. Therefore, if I press the browser button back, the entire page will return without updating the iframe.

I tried to do something like:

 document.getElementById('myiframe').contentWindow.location.replace('http://vimeo.com/videoid1'); document.getElementById('myiframe').contentWindow.location.replace('http://vimeo.com/videoid2'); document.getElementById('myiframe').contentWindow.location.replace('http://vimeo.com/videoid3');

Although this made the browser button behave the way I wanted, it broke some things in the vimeo video. Vimeo REQUIRES you to change the URLs through iframe.src instead of contentWindow.location.replace ().

How can I change iframe.src WITHOUT entering the history?

Similar This is actually one of the solutions that I am studying to solve the main problem that I posted here. Back button in the history with iframes

+6
source share
1 answer

Don't change src, just replace the old iframe with the new one?

 <!doctype html> <style> iframe { width: 300px; height:300px; } </style> <script> var urls = ["http://bing.com", "http://google.com", "http://duckduckgo.com"]; function next() { if(urls.length==0) return; var original = document.getElementsByTagName("iframe")[0]; var newFrame = document.createElement("iframe"); newFrame.src = urls.pop(); var parent = original.parentNode; parent.replaceChild(newFrame, original); } </script> <p>let test some iframes</p> <button onclick="next()">next</button> <iframe />

There are no states of history. The same functionality. Everybody wins.

+14
source

More articles:


All Articles