web-dev-qa-db-fra.com

Alternative aux iFrames avec HTML5

J'aimerais savoir s'il existe une alternative aux iFrames avec HTML5. Je veux dire par là, être capable d'injecter du HTML interdomaine à l'intérieur d'une page Web sans utiliser d'iFrame.

html5iframe
163
stemlaur

Il existe 4 méthodes pour incorporer du HTML dans une page Web:

  • <iframe> Le contenu d'un iframe réside entièrement dans un contexte distinct de celui de votre page. Bien que ce soit principalement une fonctionnalité intéressante et la plus compatible entre les versions de navigateur, cela crée des défis supplémentaires (réduire la taille du cadre à son contenu est difficile, incroyablement frustrant pour le script, presque impossible à définir).
  • AJAX. Comme le prouvent les solutions présentées ici, vous pouvez utiliser l'objet XMLHttpRequest pour récupérer des données et les injecter dans votre page. Ce n'est pas idéal car cela dépend des techniques de script, ce qui rend l'exécution plus lente et plus complexe, entre autres inconvénients .
  • Hacks . Peu mentionné dans cette question et pas très fiable.

  • Composants Web HTML5 . Les importations HTML, qui font partie des composants Web, permettent de regrouper des documents HTML dans d’autres documents HTML. Cela inclut HTML, CSS, JavaScript ou tout autre élément qu'un fichier _.html_ peut contenir. Cela en fait une excellente solution avec de nombreux cas d'utilisation intéressants: diviser une application en composants intégrés que vous pouvez distribuer sous forme de blocs de construction, mieux gérer les dépendances pour éviter les redondances, l'organisation du code, etc. Voici un exemple trivial:

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

Compatibilité native est toujours un problème, mais vous pouvez utiliser un polyfill pour le faire fonctionner dans navigateurs à feuilles persistantes Aujourd'hui.

Vous pouvez en apprendre plus ici et ici .

79
Oriol

Vous pouvez utiliser object et embed, comme ceci:

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

Ce qui n'est pas nouveau, mais fonctionne toujours. Je ne suis pas sûr s'il a les mêmes fonctionnalités cependant.

50
nate

Non, il n'y a pas d'équivalent. L'élément <iframe> est toujours valide en HTML5. En fonction de l'interaction exacte dont vous avez besoin, il peut exister différentes API. Par exemple, il existe la méthode postMessage qui vous permet d’obtenir une interaction javascript entre domaines. Mais si vous souhaitez afficher le contenu HTML interdomaine (stylé avec CSS et rendu interactif avec javascript), iframe reste un bon moyen de le faire.

48
Darin Dimitrov

object est une alternative simple en 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>

Vous pouvez également essayer 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 !!');" />
33
Abrar Jahin

Si vous voulez faire cela et contrôler le serveur à partir duquel la page de base ou le contenu est servi, vous pouvez utiliser le partage de ressources d’origine croisée ( http://www.w3.org/TR/access-control/ ) pour permettre à JavaScript côté client de charger des données dans 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();

Maintenant, pour le pivot de toute cette opération, vous devez écrire un code pour votre serveur qui donnera aux clients l’en-tête Access-Control-Allow-Origin, en spécifiant les domaines auxquels vous souhaitez que le code côté client puisse accéder via XMLHttpRequest(). . Voici un exemple de code PHP que vous pouvez inclure en haut de votre page afin d’envoyer ces en-têtes aux clients:

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

Cela semble également fonctionner, bien que le W3C spécifie qu'il n'est pas destiné "à une application externe (généralement non HTML) ou à un contenu interactif"

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

Plus d'infos: http://www.w3.org/wiki/HTML/Elements/embedhttp://www.w3schools.com/tags/tag_embed.asp

11
Thomas Simoens

Un iframe reste le meilleur moyen de télécharger du contenu visuel inter-domaines. Avec AJAX, vous pouvez certainement télécharger le code HTML depuis une page Web et le coller dans un div (comme d'autres l'ont déjà mentionné), mais le problème le plus important est la sécurité. Avec les iframes, vous serez en mesure de charger le contenu interdomaine mais ne pourrez pas le manipuler car le contenu ne vous appartient pas. D'autre part, avec AJAX, vous pouvez certainement manipuler tout contenu que vous pouvez télécharger, mais le serveur de l'autre domaine doit être configuré de manière à vous permettre de le télécharger. Souvent, vous n'aurez pas accès à la configuration de l'autre domaine et même si vous le faites, à moins de faire ce type de configuration tout le temps, cela peut être un casse-tête. Dans ce cas, l'iframe peut être l'alternative BEAUCOUP plus facile.

Comme d'autres l'ont mentionné, vous pouvez également utiliser la balise embed et la balise object, mais ce n'est pas nécessairement plus avancé ni plus récent que l'iframe.

HTML5 a davantage adopté des API Web pour obtenir des informations provenant de domaines multiples. Habituellement, les API Web renvoient des données et non du HTML.

5
Adam

Vous pouvez utiliser XMLHttpRequest pour charger une page dans un div (ou tout autre élément de votre page réellement). Une fonction exemple serait:

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

Si votre serveur en est capable, vous pouvez également utiliser PHP pour le faire, mais puisque vous demandez une méthode HTML5, vous devriez en avoir besoin.

4
CupOfTea696

J'ai créé un module de noeud pour résoudre ce problème node-iframe-replacement . Vous fournissez l'URL source du site parent et le sélecteur CSS dans lesquels injecter votre contenu, ce qui les fusionne.

Les modifications apportées au site parent sont collectées toutes les 5 minutes.

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 source contient un exemple de travail d'injection de contenu dans la page d'accueil BBC News .

3
John Doherty

Bien qu'il n'y ait pas de remplacement parfait, j'ai travaillé sur quelque chose, il est construit soit-soit facile et je suis heureux de dire que cela fonctionne (grâce à junkfoodjunkie )

Fondamentalement, mon système actuel utilise un combo php/serveur de base pour charger puis enregistrer le fichier sur le serveur. Je viens de démarrer le projet aujourd'hui, de sorte que seul le fichier principal (tel que index.html) est chargé. Je vais essayer de faire en sorte que 50 liens ish de la page soient chargés pour vous aider. Si vous souhaitez le tester: il est hébergé ici . Pour l'utiliser, rien de plus simple, il suffit de charger l'URL http://integratedmedia.ml/get/?link= et d'ajouter votre page à la fin. pas besoin d'ajouter dans https ou www. Cela posera également des problèmes si vous le faites :) Quoi qu'il en soit, si vous suivez cet ensemble, votre page copiée se trouvera à l'adresse integratedmedia.ml/get/gettmp/YOURURL.html. Voici un exemple:

integratedmedia.ml/get/?link=google.com

le fichier téléchargé est maintenant à

integratedmedia.ml/get/gettmp/google.com.html

0
ben nottelling