Alternativa a iFrames con HTML5

Vorrei sapere se esiste un'alternativa a iFrames con HTML5. Voglio dire, essere in grado di iniettare HTML tra domini all'interno di una pagina Web senza usare un iFrame.

Fondamentalmente ci sono 4 modi per incorporare HTML in una pagina web:

• <iframe>Il contenuto di un iframe vive interamente in un contesto separato rispetto alla tua pagina. Sebbene sia principalmente una grande funzionalità ed è la più compatibile tra le versioni del browser, crea ulteriori sfide (ridurre le dimensioni della cornice al suo contenuto è difficile, follemente frustrante da inserire / estrarre, quasi impossibile da definire).
• AJAX . Come dimostrano le soluzioni mostrate qui, puoi usare l' XMLHttpRequestoggetto per recuperare i dati e iniettarli nella tua pagina. Non è l'ideale perché dipende dalle tecniche di scripting, rendendo così l'esecuzione più lenta e complessa, tra gli altri inconvenienti .
• Hacks . Pochi menzionati in questa domanda e poco affidabili.

• Componenti Web HTML5 . Le importazioni HTML, parte dei componenti Web, consentono di raggruppare documenti HTML in altri documenti HTML. Che comprende HTML, CSS, JavaScripto qualsiasi altra cosa di un .htmlfile può contenere. Questo la rende un'ottima soluzione con molti casi d'uso interessanti: suddividere un'app in componenti raggruppati che è possibile distribuire come blocchi predefiniti, gestire meglio le dipendenze per evitare ridondanza, organizzazione del codice, ecc. Ecco un esempio banale:

  <!-- Resources on other origins must be CORS-enabled. -->
  <link rel="import" href="http://example.com/elements.html">

La compatibilità nativa è ancora un problema, ma è possibile utilizzare un polyfill per farlo funzionare nei browser sempreverdi oggi.

Puoi saperne di più qui e qui .

Puoi usare object e embed, in questo modo:

<object data="http://www.web-source.net" width="600" height="400">
    <embed src="http://www.web-source.net" width="600" height="400"> </embed>
    Error: Embedded data could not be displayed.
</object>

Che non è nuovo, ma funziona ancora. Non sono sicuro però che abbia le stesse funzionalità.

No, non esiste un equivalente. L' <iframe>elemento è ancora valido in HTML5. A seconda dell'interazione esatta di cui hai bisogno, potrebbero esserci diverse API. Ad esempio, esiste il postMessagemetodo che consente di ottenere l'interazione javascript tra domini. Ma se vuoi mostrare contenuti HTML tra domini (disegnati con CSS e resi interattivi con javascript) iframerimane un buon modo per farlo.

object è una facile alternativa in HTML5:

<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
    Alternative Content
</object>

Puoi anche provare embed:

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 onerror="alert('URL invalid !!');" />

Se desideri eseguire questa operazione e controllare il server da cui viene pubblicata la pagina di base o il contenuto, puoi utilizzare la condivisione di risorse Cross Origin ( http://www.w3.org/TR/access-control/ ) per consentire client- JavaScript laterale per caricare i dati in un <div>via XMLHttpRequest():

// I safely ignore IE 6 and 5 (!) users
// because I do not wish to proliferate
// broken software that will hurt other
// users of the internet, which is what
// you're doing when you write anything
// for old version of IE (5/6)
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById('displayDiv').innerHTML = xhr.responseText;
  }
};
xhr.open('GET', 'http://api.google.com/thing?request=data', true);
xhr.send();

Ora per il fulcro di tutta questa operazione, è necessario scrivere il codice per il server che fornirà ai client l' Access-Control-Allow-Originintestazione, specificando a quali domini si desidera che il codice lato client possa accedere XMLHttpRequest(). Di seguito è riportato un esempio di codice PHP che è possibile includere nella parte superiore della pagina per inviare queste intestazioni ai client:

<?php
  header('Access-Control-Allow-Origin: http://api.google.com');
  header('Access-Control-Allow-Origin: http://some.example.com');
?>

Anche questo sembra funzionare, sebbene il W3C specifichi che non è destinato "per un'applicazione esterna (tipicamente non HTML) o contenuto interattivo"

<embed src="http://www.somesite.com" width=200 height=200 />

Ulteriori informazioni: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

Un iframe è ancora il modo migliore per scaricare contenuti visivi tra domini. Con AJAX puoi sicuramente scaricare l'HTML da una pagina Web e inserirlo in un div (come altri hanno già detto), tuttavia il problema maggiore è la sicurezza. Con iframe sarai in grado di caricare il contenuto tra domini ma non sarai in grado di manipolarlo poiché il contenuto non ti appartiene. D'altra parte con AJAX puoi certamente manipolare qualsiasi contenuto che sei in grado di scaricare ma il server dell'altro dominio deve essere configurato in modo tale da permetterti di scaricarlo all'inizio. Molte volte non avrai accesso alla configurazione dell'altro dominio e anche se lo fai, a meno che tu non faccia sempre quel tipo di configurazione, può essere un mal di testa. Nel qual caso l'iframe può essere l'alternativa MOLTO più semplice.

Come altri hanno già detto, puoi anche usare il tag embed e il tag object, ma non è necessariamente più avanzato o più recente dell'iframe.

HTML5 è andato di più nella direzione dell'adozione delle API Web per ottenere informazioni da domini diversi. Solitamente le API Web restituiscono solo dati e non HTML.

È possibile utilizzare un XMLHttpRequest per caricare una pagina in un div (o qualsiasi altro elemento della pagina in realtà). Una funzione di esempio sarebbe:

function loadPage(){
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}

Se il tuo server è in grado, puoi anche usare PHP per farlo, ma poiché stai chiedendo un metodo HTML5, questo dovrebbe essere tutto ciò di cui hai bisogno.

Ho creato un modulo nodo per risolvere questo problema nodo-iframe-sostituzione . Fornisci l'URL di origine del sito padre e il selettore CSS in cui iniettare il tuo contenuto e unisce i due elementi.

Le modifiche al sito padre vengono raccolte ogni 5 minuti.

var iframeReplacement = require('node-iframe-replacement');

// add iframe replacement to express as middleware (adds res.merge method) 
app.use(iframeReplacement);

// create a regular express route 
app.get('/', function(req, res){

    // respond to this request with our fake-news content embedded within the BBC News home page 
    res.merge('fake-news', {
        // external url to fetch 
       sourceUrl: 'http://www.bbc.co.uk/news',
       // css selector to inject our content into 
       sourcePlaceholder: 'div[data-entityid="container-top-stories#1"]',
       // pass a function here to intercept the source html prior to merging 
       transform: null
    });
});

La fonte contiene un esempio funzionante di iniezione di contenuto nella home page di BBC News .

Dovresti dare un'occhiata a JSON-P - quella è stata la soluzione perfetta per me quando ho avuto quel problema:

https://en.wikipedia.org/wiki/JSONP

Fondamentalmente definisci un file javascript che carica tutti i tuoi dati e un altro file javascript che li elabora e li visualizza. Ciò elimina la brutta barra di scorrimento degli iframe.