Ricarica un IFRAME senza aggiungere alla cronologia

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

  •  03-07-2019
  •  | 
  •  

Domanda

Sto cambiando un src di IFRAME per ricaricarlo, sta funzionando bene e genera l'evento onload quando viene caricato il suo HTML.

Ma aggiunge una voce alla cronologia, che non voglio. Esiste un modo per ricaricare un IFRAME e tuttavia non influire sulla cronologia?

È stato utile?

Soluzione

Puoi usare javascript location.replace : 

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

Sostituisci il documento corrente con   uno all'URL fornito. Il   la differenza rispetto al metodo assegnato () è   che dopo aver usato sostituire () la corrente   la pagina non verrà salvata in sessione   storia, il che significa che l'utente non lo sarà   in grado di utilizzare il pulsante Indietro per   vai su di esso.

Altri suggerimenti

L'uso di replace () è solo un'opzione con il tuo dominio iframe. Non funziona su siti remoti (ad es. Un pulsante Twitter) e richiede alcune conoscenze specifiche del browser per accedere in modo affidabile alla finestra figlio.

Invece, basta rimuovere l'elemento iframe e costruirne uno nuovo nello stesso punto. Gli elementi della cronologia vengono creati solo quando modifichi l'attributo src dopo che è presente nel DOM, quindi assicurati di impostarlo prima dell'appendice

Modifica: JDandChips menziona giustamente che puoi rimuovere da DOM, modificare e aggiungere nuovamente. Non è necessario costruire fresco.

Come Greg ha detto sopra, la funzione .replace () è come farlo. Non riesco a capire come rispondere alla sua risposta *, ma il trucco è fare riferimento alla proprietà contentWindow di iFrames. 

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

* Ho appena imparato che ho bisogno di più reputazione per commentare una risposta.

Un metodo alternativo per ricreare l'iframe sarebbe rimuovere l'iframe dal DOM, cambiare l'src e quindi aggiungerlo nuovamente.

In molti modi questo è simile al suggerimento replace () , ma ho avuto alcuni problemi quando ho provato questo approccio con History.js e gestendo manualmente gli stati. 

var container = iframe.parent();

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

container.append(iframe);

Una soluzione è utilizzare il tag object anziché il tag iframe .

Sostituzione di questo: 

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

Da questo: 

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

ti permetterà di aggiornare l'attributo data senza influenzare la cronologia. Ciò è utile se si utilizza un framework dichiarativo come React.js in cui non è necessario eseguire alcun comando imperativo per aggiornare il DOM.

Ulteriori dettagli sulle differenze tra iframe e object : Utilizzo di tag Iframe o Object per incorporare pagine Web in un altro

Prova a utilizzare questa funzione per sostituire il vecchio iframe con il nuovo iframe che viene copiato da quello vecchio: 

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

Usalo in questo modo: 

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

In questo modo non aggiungere l'URL di iframe alla cronologia del browser.

Utilizza il metodo sostituisci per bypassare l'aggiunta dell'URL iframe alla cronologia:

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

La soluzione di caricamento più semplice e veloce
Utilizzare window.location.replace per non aggiornare la cronologia durante il caricamento della pagina o della cornice.

Per i collegamenti è simile al seguente: 

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

o 

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



Ma se vuoi che non agisca dal link ma agisca automaticamente quando carichi il frame, allora dall'iframe dovresti metterlo nella sezione del corpo del file iframe: 

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

Se per qualche motivo l'onload non viene caricato nell'iframe, inserire il nome del frame di destinazione anziché la finestra nella sintassi in questo modo: 

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



NOTA: per questo script tutti onclick , onmouseover , onmouseout , onload e < code> href = " javascript: " funzionerà.

La risposta di JDandChips ha funzionato per me su un iframe di origine incrociata (youtube), eccolo in JS vaniglia (senza JQuery): 

const container = iframe.parentElement;

container.removeChild(iframe);

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

container.appendChild(iframe);
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top