10

I have an iframe in my web page. I modify the src property via javascript like so:

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, everytime I do this, it's logged into the browser's history. So everytime I press back in the browser window, the iframe content goes from videoid3 to videoid2 to videoid1. If I press back again, the entire page goes back.

I would like to modify the iframe src with javascript WITHOUT logging an entry into the browser's history. So if i click the browser back button, the entire page goes back without updating the iframe.

I tried doing 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 back button behave the way I wanted to, it broke certain things in the vimeo video. Vimeo REQUIRES you to change urls via the iframe.src instead of contentWindow.location.replace().

As such, how do I modify the iframe.src WITHOUT logging into history?

Related This is actually one of the solutions I'm exploring to solve the main problem, which I posted here History object back button with iframes

1

2 Answers 2

20

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

const urls = [
  "http://bing.com",
  "http://google.com",
  "http://duckduckgo.com"
];

function next() {
  if(urls.length==0) return;
  const original = document.getElementsByTagName("iframe")[0];
  const newFrame = document.createElement("iframe");
  newFrame.src = urls.pop();
  original.parentNode.replaceChild(newFrame, original);
}

nextbtn.addEventListener("click", () => next());
iframe {
  width: 300px;
  height:300px;
}
<p>let's test some iframes</p>
<button id="nextbtn">next</button>
  <iframe />

No history states. Same functionality. Everyone wins.

1
  • if you want, you can post this answer to my other question that i mentioned. THen i'll accept it.
    – John
    Feb 6, 2013 at 20:11
0

You can do something like this:

var iframe = $('#iframe')[0];  
iframe.contentWindow.location.replace(newUrl);
1
  • The question explicitly says that this solution is not okay due to Vimeo requirements. Oct 23, 2020 at 4:24

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.