Question

我的网页上有一个iframe。我通过javascript修改src属性，如：

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

但是，每次我这样做时，它都会记录在浏览器的历史记录中。因此，每次我在浏览器窗口中按下时，iframe内容都会从videoid3转到videoid2到videoid1。如果我再次按回，整个页面都会返回。

我想用javascript修改iframe src而不在浏览器的历史记录中记录条目。因此，如果我单击浏览器后退按钮，整个页面将返回而不更新iframe。

我尝试过这样的事情：

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');

虽然这使得浏览器后退按钮按照我想要的方式运行，但它打破了vimeo视频中的某些内容。 Vimeo要求您通过iframe.src而不是contentWindow.location.replace（）来更改URL。

因此，如何在不登录历史记录的情况下修改iframe.src？

相关这实际上是我正在探索解决主要问题的解决方案之一，我在这里发布History object back button with iframes

Answer 1

不要更改src，只需用新的iframe替换旧的iframe吗？

<!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's test some iframes</p>
<button onclick="next()">next</button>
<iframe />

没有历史陈述。功能相同。每个人都赢了。

Answer 2

您可以这样做：

var iframe = $('#iframe')[0];  
iframe.contentWindow.location.replace(newUrl);

修改iframe.src而不输入历史记录对象

2 个答案: