Alternative aux iFrames avec HTML5

Question

Je voudrais savoir s'il existe une alternative aux iFrames avec HTML5. Par là, j'entends la possibilité d'injecter du HTML de domaines croisés à l'intérieur d'une page web sans utiliser un iFrame.

Answer 1

Vous pouvez utiliser object et embed, comme ceci:

    Erreur : Les données incorporées n'ont pas pu être affichées.

Ce n'est pas nouveau, mais ça fonctionne toujours. Je ne suis pas sûr si cela a la même fonctionnalité cependant.

Answer 2

Non, il n'y a pas d'équivalent. L'élément </code></a> est toujours valide en HTML5. En fonction de l'interaction exacte dont vous avez besoin, il peut y avoir différentes APIs. Par exemple, il y a la méthode <a href="https://developer.mozilla.org/en/DOM/window.postMessage"><code>postMessage</code></a> qui vous permet d'atteindre une interaction javascript entre domaines croisés. Mais si vous voulez afficher du contenu HTML entre domaines (stylisé avec CSS et rendu interactif avec javascript) <code>iframe</code> reste une bonne façon de le faire.</p></x-turndown>

Answer 3

Si vous souhaitez faire cela et contrôler le serveur à partir duquel la page de base ou le contenu est servi, vous pouvez utiliser Cross Origin Resource Sharing (http://www.w3.org/TR/access-control/) pour permettre au JavaScript côté client de charger des données dans un

via XMLHttpRequest():

// J'ignore en toute sécurité les utilisateurs d'IE 6 et 5 (!)
// parce que je ne souhaite pas propager
// des logiciels obsolètes qui nuiront aux autres
// utilisateurs d'internet, c'est ce que vous faites
// lorsque vous écrivez pour les anciennes versions d'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-tête Access-Control-Allow-Origin, 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 pour envoyer ces en-têtes aux clients :

Answer 4

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

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

Answer 5

Une iframe est toujours la meilleure façon de télécharger du contenu visuel de domaines croisés. Avec AJAX, vous pouvez certainement télécharger le HTML d'une page web et le coller dans une div (comme d'autres l'ont mentionné) cependant le plus gros problème est la sécurité. Avec les iframes, vous pourrez charger le contenu de domaine croisé mais vous ne pourrez pas le manipuler car le contenu ne vous appartient pas vraiment. D'autre part, avec AJAX, vous pouvez certainement manipuler tout le contenu que vous êtes capable de télécharger mais le serveur du domaine distant doit être configuré de manière à vous permettre de le télécharger en premier lieu. Beaucoup de fois, vous n'aurez pas accès à la configuration du domaine distant et même si vous le faites, à moins de faire ce genre de configuration tout le temps, cela peut être un casse-tête. Dans ce cas, l'iframe peut être une 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é ou plus récent que l'iframe.

HTML5 s'est davantage orienté vers l'adoption des API web pour obtenir des informations à partir de domaines croisés. Habituellement, les API web renvoient simplement des données et non pas du HTML.