web-dev-qa-db-fra.com

Recharger un IFRAME sans ajouter d'historique

Je modifie la variable src d'un IFRAME afin de la recharger, fonctionne correctement et déclenche l'événement onload lors du chargement de son code HTML.

Mais cela ajoute une entrée à l'histoire, ce que je ne veux pas. Est-il possible de recharger un IFRAME sans pour autant affecter l'historique?

javascripthtmliframe
59
Robinicks

Vous pouvez utiliser javascript location.replace :

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

Remplacez le document actuel par le un à l'URL fournie. Le La différence par rapport à la méthode assign () est qu'après l’utilisation de replace (), le courant La page ne sera pas enregistrée en session histoire, ce qui signifie que l'utilisateur ne sera pas capable d'utiliser le bouton Précédent pour accédez à elle.

28
Greg

Utiliser replace () n’est qu’une option avec vos propres iframes de domaine. Il ne fonctionne pas sur des sites distants (par exemple, un bouton Twitter) et nécessite des connaissances spécifiques du navigateur pour accéder de manière fiable à la fenêtre enfant.

Au lieu de cela, il suffit de supprimer l’élément iframe et d’en construire un nouveau au même endroit. Les éléments de l'historique ne sont créés que lorsque vous modifiez l'attribut src après qu'il soit dans le DOM. Veillez donc à le définir avant l'ajout.

Edit: JDandChips mentionne à juste titre que vous pouvez supprimer, modifier et ajouter de nouveau DOM. Construire frais n'est pas nécessaire.

65
greg.kindel

Comme Greg l’a dit plus haut, la fonction .replace () explique comment procéder. Je n'arrive pas à comprendre comment répondre à sa réponse *, mais l'astuce consiste à référencer la propriété contentWindow de iFrames.

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

* Je viens d'apprendre que j'ai besoin de plus de réputation pour commenter une réponse.

18
StapleGun

Une autre méthode pour recréer l'iframe serait de supprimer l'iframe du DOM, de modifier le src, puis de l'ajouter de nouveau.

À bien des égards, cela ressemble à la suggestion replace(), mais je rencontrais quelques problèmes lorsque j'ai essayé cette approche avec History.js et la gestion manuelle des états.

var container = iframe.parent();

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

container.append(iframe);
12
JDandChips

Une solution consiste à utiliser la balise object plutôt que la balise iframe.

Remplacer ceci:

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

Par ça:

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

vous permettra de mettre à jour l'attribut data sans affecter l'historique. Ceci est utile si vous utilisez un framework déclaratif tel que React.js dans lequel vous n'êtes pas censé effectuer de commande impérative pour mettre à jour le DOM.

Plus de détails sur les différences entre iframe et object: Utilisation de la balise Iframe ou Object pour incorporer des pages Web dans une autre

9
JBE

Essayez d'utiliser cette fonction pour remplacer l'ancienne iframe par la nouvelle iframe qui est copiée à partir de l'ancienne:

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

Utilisez-le comme ceci:

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

De cette façon, l'URL d'iframe n'est pas ajoutée à l'historique du navigateur.

5
Minh Nguyen

La réponse de JDandChips a fonctionné pour moi sur une croix Origine iframe (youtube), la voici en Vanilla JS (sans JQuery):

const container = iframe.parentElement;

container.removeChild(iframe);

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

container.appendChild(iframe);
0
NeilD

Utilisez la méthode replace pour ignorer l’ajout de l’URL de l’iframe à l’historique:

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')
}
0
Karin Lahyani

La solution de chargement la plus simple et rapide
Utilisez window.location.replace pour ne pas mettre à jour l’historique lors du chargement de la page ou du cadre.

Pour les liens, cela ressemble à ceci:

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

ou

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



Mais si vous voulez qu'il n'agisse pas de lien, mais agisse automatiquement lors du chargement du cadre, vous devez le placer dans l'iframe dans la section corps du fichier iframe:

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


Si pour une raison quelconque, le chargement onload ne se charge pas dans l'iframe, indiquez le nom du cadre cible à la place de window dans la syntaxe suivante:

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



REMARQUE: Pour ce script, toutes les variables onclick, onmouseover, onmouseout, onload et href="javascript:" fonctionneront.

0
SeekLoad