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

StackOverflow https://stackoverflow.com/questions/821359

  •  03-07-2019
  •  | 
  •  

質問

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

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

役に立ちましたか？

解決

javascript location.replace ：<を使用できます。 / p> 

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

現在のドキュメントを   提供されたURLに1つ。の   assign（）メソッドとの違いは   replace（）を使用した後、現在の   ページはセッションに保存されません   履歴、つまりユーザーは   戻るボタンを使用して   それに移動します。

他のヒント

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

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

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

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

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

*答えにコメントするには、もっと評判が必要だと知った。

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

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

var container = iframe.parent();

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

container.append(iframe);

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

これを置き換える：

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

これにより：

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

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

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

この関数を使用して、古い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は追加されません。

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

最もシンプルで高速な読み込みソリューション
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 および< code> href =＆quot; javascript：＆quot; は機能します。

JDandChipsの回答は、クロスオリジンiframe（youtube）で機能しました。ここでは、バニラJS（JQueryなし）にあります：

const container = iframe.parentElement;

container.removeChild(iframe);

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

container.appendChild(iframe);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top