Alternative aux iFrames avec HTML5

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

Fondamentalement, il existe 4 façons d'intégrer du HTML dans une page Web:

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

• 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, JavaScriptou quoi que ce soit d' autre d' un .htmlfichier peut contenir. Cela en fait une excellente solution avec de nombreux cas d'utilisation intéressants: diviser une application en composants groupés que vous pouvez distribuer en tant que blocs de construction, mieux gérer les dépendances pour éviter la redondance, 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">

La compatibilité native est toujours un problème, mais vous pouvez utiliser un polyfill pour le faire fonctionner dans les navigateurs Evergreen aujourd'hui.

Vous pouvez en savoir plus ici et ici .

Vous pouvez utiliser un objet et l'intégrer, 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 qu'il ait la même fonctionnalité.

Non, il n'y a pas d'équivalent. L' <iframe>élément est toujours valide en HTML5. En fonction de l'interaction exacte dont vous avez besoin, il peut y avoir différentes API. Par exemple, il existe la postMessageméthode qui vous permet de réaliser une interaction javascript entre domaines. Mais si vous souhaitez afficher des contenus HTML interdomaines (stylisés avec CSS et rendus interactifs avec javascript), cela iframereste un bon moyen de le faire.

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

Si vous souhaitez 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 Cross Origin ( http://www.w3.org/TR/access-control/ ) pour permettre au client- côté JavaScript pour 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 du code pour votre serveur qui donnera aux clients l'en- Access-Control-Allow-Origintête, en spécifiant les domaines auxquels vous voulez 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');
?>

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/embed http://www.w3schools.com/tags/tag_embed.asp

Une iframe reste le meilleur moyen de télécharger du contenu visuel inter-domaines. Avec AJAX, vous pouvez certainement télécharger le HTML à partir d'une page Web et le coller dans un div (comme d'autres l'ont mentionné), mais le plus gros problème est la sécurité. Avec les iframes, vous pourrez charger le contenu de plusieurs domaines, mais ne pourrez pas le manipuler car le contenu ne vous appartient pas réellement. D'un autre côté, 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 pour commencer. 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 une alternative BEAUCOUP plus simple.

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

HTML5 est allé davantage dans le sens de l'adoption d'API Web pour obtenir des informations à partir de plusieurs domaines. En général, les API Web ne renvoient que des données et non du HTML.

Vous pouvez utiliser une XMLHttpRequest pour charger une page dans un div (ou tout autre élément de votre page en fait). Un exemple de fonction 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, cela devrait être tout ce dont vous avez besoin.

J'ai créé un module de nœud pour résoudre ce problème de remplacement de nœud-iframe . Vous fournissez l'URL source du site parent et le sélecteur CSS dans lequel injecter votre contenu et il fusionne les deux ensemble.

Les modifications apportées au site parent sont récupéré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 de BBC News .

Vous devriez jeter un œil à JSON-P - c'était une solution parfaite pour moi quand j'ai eu ce problème:

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

Vous définissez essentiellement un fichier javascript qui charge toutes vos données et un autre fichier javascript qui les traite et les affiche. Cela élimine la vilaine barre de défilement des iframes.