10

Web ページに 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 に移動します。もう一度戻ると、ページ全体が戻ります。

ブラウザーの履歴にエントリを記録せずに、iframe src を javascript で変更したいと考えています。したがって、ブラウザの戻るボタンをクリックすると、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 では、contentWindow.location.replace() の代わりに iframe.src を使用して URL を変更する必要があります。

そのため、履歴にログインせずに iframe.src を変更するにはどうすればよいですか?

関連 これは、実際に私がここに投稿した主な問題を解決するために私が模索しているソリューションの1つです iframesの 履歴オブジェクトの戻るボタン

4

2 に答える 2

20

src を変更せずに、古い 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 />

歴史の状態はありません。同じ機能。誰もが勝ちます。

于 2013-02-06T20:07:16.767 に答える