我的网页中有一个 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() 更改网址。
因此,如何在不登录历史记录的情况下修改 iframe.src ?
Related这实际上是我正在探索解决主要问题的解决方案之一,我将其发布在这里带有 iframe 的历史对象后退按钮 https://stackoverflow.com/questions/14722089/history-object-back-button-with-iframes
不改变src,只用新的iframe替换旧的iframe吗?
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 />
历史上没有记载。相同的功能。每个人都赢了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)