web-dev-qa-db-fra.com

Comment afficher un site Web externe dans une autre page sans iFrame?

Je dois ouvrir un site Web externe dans mon application sans iFrame et je dois également transmettre certaines valeurs d'en-tête à ce site Web externe.

Aidez moi..

jqueryhtmlwebdojo
11
Prabhu Arumugam

Quelques solutions alternatives à un iframe sont:

AJAX - Vous pouvez utiliser l'objet XMLHttpRequest pour récupérer des données et les injecter dans votre page, par exemple à l'intérieur d'un div. Exemple utilisant jQuery:

 $( "#result" ).load( "ajax/test.html" );

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. Exemple:

   <link rel="import" href="http://stackoverflow.com">

Quelques autres idées sont:

<object> tag - Il définit un objet incorporé dans un document HTML. Peut être utilisé pour des fichiers HTML et du contenu multimédia comme l'audio, la vidéo, les applets, ActiveX, PDF et Flash ou d'autres plugins).

   <object data="http://stackoverflow.com" width="400" height="300" type="text/html">
        Alternative Content
    </object>

<embed> tag - Il définit un conteneur pour une application externe, par exemple un plug-in, peut également être "piraté" et utilisé pour afficher une page HTML.

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

En ce qui concerne le passage de HEADER, la meilleure solution serait d'utiliser une approche AJAX, voici un exemple:

$.ajax({
    url: "http://stackoverflow.com",
    data: { uname: "test" },
    type: "GET",
    beforeSend: function(xhr){xhr.setRequestHeader('X-TOKEN', 'xxxxx');},
    success: function() { alert('Success!' + authHeader); }
});

or in this way,

$.ajax({
    url: "http://stackoverflow.com",
    data: { uname: "test" },
    type: "GET",
    headers:{ "X-TOKEN": 'xxxxx'},
    success: function() { alert('Success!' + authHeader); }
});
21
GibboK

vous pouvez essayer ceci:

<div> 
    <object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
 </div>
3
fernando