Alternative zu iFrames mit HTML5

196

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.

stemlaur
quelle

Antworten:

96

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 .

Oriol
quelle
3
HTML5-Webkomponenten sind interessant.
Krishna Srihari
1
Ich weiß, dass dieser Beitrag etwas alt ist, möchte aber nur Folgendes kommentieren: In Bezug auf AJAX: "Es ist keine Idee, weil er auf Skripttechniken beruht" ... Also, was ist falsch an der Verwendung von Skripten? AJAX ist der unbestrittene Spitzenreiter dieser Entscheidungen und wird schnell zum Standard.
nmg49
11
Leider ist HTML Imports mittlerweile veraltet. developer.mozilla.org/en-US/docs/Web/Web_Components/…
Gman
Gibt es einen neuen Weg, um dies zu erreichen?
Walter
Ein weiterer entscheidender Nachteil von iFrames ist die Tatsache, dass es viele Websites gibt, die 'X-Frame-Options' auf 'sameorigin' gesetzt haben und dann einfach die Verbindung ablehnen. In diesem Fall bleibt Ihr iFrame leer. Keine Möglichkeit, das zu beheben.
Igor P.
61

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.

nate
quelle
Vielen Dank, ersparte mir das Laden des SDK für Facebook wie Box.
Techagesite
51

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.

Darin Dimitrov
quelle
3
Ich muss Inhalte von Google laden. Aber Google kann nicht iframed werden, was ist die Alternative.
Mike
17
@Mike, die Alternative wäre, die API für den Dienst zu verwenden, den Sie verwenden möchten. Google bietet für die meisten seiner Dienste RESTful-APIs an.
Darin Dimitrov
45

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 !!');" />

Abrar Jahin
quelle
4
Beide umgehen nicht die Probleme, die ich mit Iframes wie Sicherheitsrichtlinien habe
SeanMC
3
Beachten Sie, dass die meisten modernen Browser die Unterstützung für Browser-Plug-Ins veraltet und entfernt haben. Daher ist es im Allgemeinen nicht ratsam, sich auf <embed> zu verlassen, wenn Sie möchten, dass Ihre Website im Browser eines durchschnittlichen Benutzers ausgeführt werden kann.
Neeraj
20

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');
?>
L0j1k
quelle
8

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.

Adam
quelle
1
Es ist nicht wirklich eine Antwort, aber sicherlich einnice-to-know
Stef Geysels
4

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.

CupOfTea696
quelle
4
Das Laden von Inhalten aus anderen Domänen mit XMLHttpRequest wird von den meisten Browsern blockiert.
Erik Terenius
4
Op fragt nach domänenübergreifenden, diese Antwort ist ungültig.
Teoman Shipahi
4

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.

John Doherty
quelle
0

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.

Mathias Bader
quelle