Alternative zu iFrames mit HTML5

Ich würde gerne wissen, ob es eine Alternative zu iFrames mit HTML5 gibt. Ich meine damit, dass Sie domänenübergreifendes HTML in eine Webseite einfügen können, ohne einen iFrame zu verwenden.

Grundsätzlich gibt es 4 Möglichkeiten, HTML in eine Webseite einzubetten:

• <iframe>Der Inhalt eines Iframes befindet sich vollständig in einem anderen Kontext als Ihre Seite. Obwohl dies größtenteils eine großartige Funktion ist und unter den Browserversionen am besten kompatibel ist, entstehen zusätzliche Herausforderungen (das Schrumpfen der Größe des Frames auf den Inhalt ist schwierig, wahnsinnig frustrierend beim Ein- und Ausschreiben, fast unmöglich beim Stylen).
• AJAX . Wie die hier gezeigten Lösungen beweisen, können Sie das XMLHttpRequestObjekt verwenden, um Daten abzurufen und in Ihre Seite einzufügen. Es ist nicht ideal , weil es auf Skriptingverfahren abhängt, damit die Ausführung langsamer und komplexer zu machen, unter anderen Nachteilen .
• Hacks . Nur wenige in dieser Frage erwähnt und nicht sehr zuverlässig.

• HTML5-Webkomponenten . HTML-Importe, Teil der Webkomponenten, ermöglichen das Bündeln von HTML-Dokumenten in anderen HTML-Dokumenten. Dazu gehört HTML, oder alles andere CSS, JavaScriptwas eine .htmlDatei enthalten kann. Dies macht es zu einer großartigen Lösung mit vielen interessanten Anwendungsfällen: Teilen Sie eine App in gebündelte Komponenten auf, die Sie als Bausteine ​​verteilen können, verwalten Sie Abhängigkeiten besser, um Redundanz, Code-Organisation usw. zu vermeiden. Hier ein einfaches Beispiel:

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

Die native Kompatibilität ist immer noch ein Problem, aber Sie können eine Polyfüllung verwenden , damit sie heute in immergrünen Browsern funktioniert .

Hier und hier können Sie mehr erfahren .

Sie können Objekt verwenden und wie folgt einbetten:

<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>

Was nicht neu ist, aber trotzdem funktioniert. Ich bin mir nicht sicher, ob es die gleiche Funktionalität hat.

Nein, es gibt kein Äquivalent. Das <iframe>Element ist in HTML5 noch gültig. Je nachdem, welche Interaktion Sie genau benötigen, gibt es möglicherweise unterschiedliche APIs. Zum Beispiel gibt es die postMessageMethode, mit der Sie eine domänenübergreifende Javascript-Interaktion erzielen können. Wenn Sie jedoch domänenübergreifende HTML-Inhalte anzeigen möchten (mit CSS gestaltet und mit Javascript interaktiv gemacht), iframebleibt dies eine gute Möglichkeit.

object ist eine einfache Alternative 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>

Sie können auch versuchen 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 !!');" />

Wenn Sie dies tun und den Server steuern möchten, von dem aus die Basisseite oder der Basisinhalt bereitgestellt wird , können Sie die Cross Origin-Ressourcenfreigabe ( http://www.w3.org/TR/access-control/ ) verwenden, um Client- zuzulassen. Seite JavaScript zum Laden von Daten in eine <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();

Für den Dreh- und Angelpunkt dieser gesamten Operation müssen Sie nun Code für Ihren Server schreiben, der den Clients den Access-Control-Allow-OriginHeader gibt, und angeben, über welche Domänen der clientseitige Code zugreifen soll XMLHttpRequest(). Das folgende Beispiel zeigt PHP-Code, den Sie oben auf Ihrer Seite einfügen können, um diese Header an Clients zu senden:

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

Dies scheint auch zu funktionieren, obwohl W3C angibt, dass es nicht "für eine externe (normalerweise nicht HTML)) Anwendung oder interaktiven Inhalte" gedacht ist.

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

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

Ein Iframe ist immer noch der beste Weg, um domänenübergreifende visuelle Inhalte herunterzuladen. Mit AJAX können Sie den HTML-Code sicherlich von einer Webseite herunterladen und in ein Div stecken (wie andere bereits erwähnt haben). Das größere Problem ist jedoch die Sicherheit. Mit iframes können Sie den domänenübergreifenden Inhalt laden, ihn jedoch nicht bearbeiten, da der Inhalt Ihnen nicht gehört. Auf der anderen Seite können Sie mit AJAX sicherlich jeden Inhalt manipulieren, den Sie herunterladen können, aber der Server der anderen Domain muss so eingerichtet sein, dass Sie ihn zunächst herunterladen können. Oft haben Sie keinen Zugriff auf die Konfiguration der anderen Domäne, und selbst wenn Sie dies tun, kann dies Kopfschmerzen verursachen, es sei denn, Sie führen diese Art von Konfiguration ständig durch. In diesem Fall kann der Iframe die VIEL einfachere Alternative sein.

Wie bereits erwähnt, können Sie auch das Einbettungs- und das Objekt-Tag verwenden, dies ist jedoch nicht unbedingt fortgeschrittener oder neuer als der Iframe.

HTML5 hat sich mehr auf die Einführung von Web-APIs konzentriert, um Informationen von domänenübergreifenden Informationen abzurufen. Normalerweise geben Web-APIs nur Daten zurück und nicht HTML.

Sie können eine XMLHttpRequest verwenden, um eine Seite in ein div (oder ein anderes Element Ihrer Seite) zu laden. Eine beispielhafte Funktion wäre:

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

Wenn Ihr Server dazu in der Lage ist, können Sie auch PHP verwenden. Da Sie jedoch nach einer HTML5-Methode fragen, sollte dies alles sein, was Sie benötigen.

Ich habe ein Knotenmodul erstellt, um dieses Problem beim Ersetzen des Knoten-Iframe zu lösen . Sie geben die Quell-URL der übergeordneten Site und den CSS-Selektor an, in den Sie Ihren Inhalt einfügen möchten, und die beiden werden zusammengeführt.

Änderungen an der übergeordneten Site werden alle 5 Minuten erfasst.

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

Die Quelle enthält ein funktionierendes Beispiel für das Einfügen von Inhalten in die BBC News -Homepage.

Sie sollten sich JSON-P ansehen - das war eine perfekte Lösung für mich, als ich dieses Problem hatte:

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

Sie definieren im Grunde eine Javascript-Datei, die alle Ihre Daten lädt, und eine andere Javascript-Datei, die sie verarbeitet und anzeigt. Das beseitigt die hässliche Bildlaufleiste von Iframes.