web-dev-qa-db-ja.com

履歴に追加せずにIFRAMEをリロードします

IFRAMEのsrcを変更してリロードし、正常に機能し、HTMLの読み込み時にonloadイベントを発生させています。

しかし、これは履歴にエントリを追加しますが、これは望ましくありません。 IFRAMEをリロードしても、履歴に影響を与えない方法はありますか？

javascripthtmliframe
62
Robinicks

Javascript location.replace ：

window.location.replace('...html');

現在のドキュメントを指定されたURLのドキュメントに置き換えます。 assign（）メソッドとの違いは、replace（）を使用した後、現在のページがセッション履歴に保存されないことです。つまり、ユーザーは[戻る]ボタンを使用してそのページに移動できません。

30
Greg

Replace（）の使用は、独自のドメインiframeのオプションにすぎません。リモートサイト（例：Twitterボタン）で動作せず、子ウィンドウに確実にアクセスするには、ブラウザ固有の知識が必要です。

代わりに、iframe要素を削除して、同じ場所に新しい要素を作成します。履歴項目は、DOM内でsrc属性を変更したときにのみ作成されるため、追加する前に必ず設定してください。

編集：JDandChipsは、DOMから削除、変更、および再追加できることを正しく述べています。フレッシュを構築する必要はありません。

68
greg.kindel

上記のGregが言ったように、.replace（）関数はこれを行う方法です。私は彼の答え*に返信する方法を理解できないようですが、コツはiFramesのcontentWindowプロパティを参照することです。

var ifr = document.getElementById("iframeId");
ifr.contentWindow.location.replace("newLocation.html");

*回答についてコメントするには、もっと評判が必要だと知りました。

19
StapleGun

Iframeを再作成する別の方法は、DOMからiframeを削除し、srcを変更してから追加し直すことです。

多くの点でこれはreplace()の提案に似ていますが、History.jsでそのアプローチを試み、状態を手動で管理しようとしたときにいくつかの問題がありました。

var container = iframe.parent();

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);
12
JDandChips

1つの解決策は、objectタグではなくiframeタグを使用することです。

これを置き換える：

<iframe src="http://yourpage"/>

これで：

<object type="text/html" data="http://yourpage"/>

履歴に影響を与えずにdata属性を更新できます。これは、React.jsなどの宣言型フレームワークを使用して、DOMを更新するための命令的なコマンドを実行することになっていない場合に便利です。

iframeとobjectの違いの詳細： IframeまたはObjectタグを使用してWebページを別のページに埋め込む

9
JBE

この関数を使用して、古いiframeを古いiframeからコピーされた新しいiframeに置き換えてみてください。

function setIFrameSrc(idFrame, url) {
    var originalFrame = document.getElementById(idFrame);
    var newFrame = document.createElement("iframe");
    newFrame.id = originalFrame.getAttribute("id");
    newFrame.width = originalFrame.getAttribute("width");
    newFrame.height = originalFrame.getAttribute("height");
    newFrame.src = url;    
    var parent = originalFrame.parentNode;
    parent.replaceChild(newFrame, originalFrame);
}

次のように使用します。

setIFrameSrc("idframe", "test.html");

この方法では、iframeのURLはブラウザー履歴に追加されません。

5
Minh Nguyen

replaceメソッドを使用して、iframeのURLの履歴への追加をバイパスします。

HTML：

<iframe id="myIframe" width="100%" height="400" src="#"></iframe>

JavaScript：

var ifr = document.getElementById('mIframe')
if (ifr) {
  ifr.contentWindow.location.replace('http://www.blabla.com')
}
1
Karin Lahyani

JDandChipsの答えはクロスオリジンiframe（youtube）で私のために働いていました、ここではVanilla JS（JQueryなし）です：

const container = iframe.parentElement;

container.removeChild(iframe);

iframe.setAttribute('src', 'about:blank');

container.appendChild(iframe);
0
NeilD

最もシンプルで高速な読み込みソリューション
使用する window.location.replaceページまたはフレームをロードするときに履歴を更新しません。

リンクの場合、次のようになります。

<a href="#" onclick="YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>

または

<a href="javascript:YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>



ただしリンクからは動作せず、フレームのロード時に自動的に動作するようにしたい場合は、iframeからiframeファイルの本文セクションにこれを配置する必要があります。

onload="window.location.replace ('http://www.YourPage.com');"


何らかの理由でonloadがiframeにロードされない場合、次のような構文でwindowの代わりにターゲットフレーム名を入力します。

onload="YourTarget.location.replace ('http://www.YourPage.com');"



注：このスクリプトでは、すべてのonclick、onmouseover、onmouseout、onloadおよびhref="javascript:" 働くでしょう。

0
SeekLoad