html5 - etiqueta - insertar html en otro html sin iframe

Alternativa a iFrames con HTML5

Question

Me gustaría saber si existe una alternativa a los iFrames con HTML5. Quiero decir con eso, ser capaz de inyectar código HTML de dominios cruzados dentro de una página web sin usar un iFrame.

Answer 1

Aunque no hay un reemplazo perfecto, he estado trabajando en algo, está hecho para ser fácil y estoy feliz de decir que funciona (gracias a junkfoodjunkie )

Básicamente, mi sistema actual usa un combo de php / servidor básico para cargar y luego guardar el archivo en el servidor, recién comencé el proyecto, por lo que solo se carga el archivo principal (como index.html). Trabajaré para que cargue 50 enlaces ish de la página para ayudar con el soporte. Si desea probarlo: está alojado here . Para usarlo es fácil, simplemente cargue la URL http://integratedmedia.ml/get/?link= y agregue su página hasta el final. no es necesario agregar en https o www. También causará problemas si lo hace :) De todas formas, si sigue ese conjunto, su página copiada se encontrará en integratedmedia.ml/get/gettmp/YOURURL.html. Aquí hay un ejemplo:

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

el archivo descargado está ahora en

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

Answer 2

Básicamente, hay 4 formas de insertar HTML en una página web:

• <iframe> El contenido de un iframe vive completamente en un contexto separado de su página. Si bien es una gran característica y es la más compatible entre las versiones de los navegadores, crea desafíos adicionales (reducir el tamaño del marco a su contenido es difícil, increíblemente frustrante para crear y quitar secuencias de comandos, casi imposible de darle estilo).
• AJAX . Como lo demuestran las soluciones que aquí se muestran, puede usar el objeto XMLHttpRequest para recuperar datos e insertarlos en su página. No es ideal porque depende de las técnicas de scripting, lo que hace que la ejecución sea más lenta y compleja, entre otros drawbacks .
• Hacks . Pocos mencionaron en esta pregunta y no son muy confiables.

• Componentes web HTML5 . HTML Imports, parte de los componentes web, permite agrupar documentos HTML en otros documentos HTML. Eso incluye HTML , CSS , JavaScript o cualquier otra cosa que pueda contener un archivo .html . Esto lo convierte en una gran solución con muchos casos de uso interesantes: divida una aplicación en componentes agrupados que puede distribuir como bloques de construcción, administrar mejor las dependencias para evitar la redundancia, la organización del código, etc. Aquí hay un ejemplo trivial:

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

La compatibilidad nativa sigue siendo un problema, pero puede usar un polyfill para que funcione en los navegadores de hoja perenne Hoy.

Puedes aprender más here y here .

Answer 3

Creé un módulo de nodo para resolver este problema node-iframe-replacement . Usted proporciona la URL de origen del sitio principal y el selector de CSS para insertar su contenido y fusiona los dos juntos.

Los cambios en el sitio principal se recogen cada 5 minutos.

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 fuente contiene un ejemplo práctico de la inyección de contenido en la página principal de BBC News .

Answer 4

Esto también parece funcionar, aunque W3C especifica que no está destinado "para una aplicación externa (generalmente no HTML) o contenido interactivo"

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

Más información: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

Answer 5

No, no hay un equivalente. El elemento <iframe> sigue siendo válido en HTML5. Según la interacción exacta que necesite, puede haber diferentes API. Por ejemplo, existe el método postMessage que le permite lograr la interacción de JavaScript entre dominios. Pero si desea mostrar contenidos HTML de dominio cruzado (estilo con CSS e interactivo con javascript) iframe mantiene como una buena forma de hacerlo.

Answer 6

Puede usar object e embedded, así:

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

Lo cual no es nuevo, pero aún funciona. Aunque no estoy seguro de si tiene la misma funcionalidad.

Answer 7

Puede usar un XMLHttpRequest para cargar una página en un div (o cualquier otro elemento de su página realmente). Una función ejemplar sería:

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 su servidor es capaz, también puede usar PHP para hacer esto, pero ya que está pidiendo un método HTML5, esto debería ser todo lo que necesita.

Answer 8

Si desea hacer esto y controlar el servidor desde el que se está sirviendo la página base o el contenido, puede usar Cross Origin Resource Sharing ( http://www.w3.org/TR/access-control/ ) para permitirle al cliente lado JavaScript para cargar datos en un <div> través de 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();

Ahora, para el eje de toda esta operación, debe escribir un código para su servidor que le otorgue a los clientes el encabezado Access-Control-Allow-Origin , especificando a qué dominios desea que el código del lado del cliente pueda acceder a través de XMLHttpRequest() . El siguiente es un ejemplo de código PHP que puede incluir en la parte superior de su página para enviar estos encabezados a los clientes:

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

Answer 9

Un iframe sigue siendo la mejor forma de descargar contenido visual entre dominios. Con AJAX sin duda puede descargar el HTML de una página web y pegarlo en un div (como han mencionado otros), sin embargo, el mayor problema es la seguridad. Con los iframes, podrá cargar el contenido de dominios cruzados, pero no podrá manipularlo, ya que el contenido en realidad no le pertenece. Por otro lado, con AJAX, puede manipular cualquier contenido que pueda descargar, pero el servidor del otro dominio debe configurarse de tal manera que le permita descargarlo desde el principio. Muchas veces no tendrá acceso a la configuración del otro dominio e incluso si lo hace, a menos que haga ese tipo de configuración todo el tiempo, puede ser un dolor de cabeza. En cuyo caso, el iframe puede ser la alternativa MUCHO más fácil.

Como otros han mencionado, también puede usar la etiqueta de inserción y la etiqueta de objeto, pero eso no es necesariamente más avanzado o más nuevo que el iframe.

HTML5 ha ido más en la dirección de adoptar API web para obtener información de dominios cruzados. Por lo general, las API web simplemente devuelven datos y no HTML.

Answer 10

puedes usar la etiqueta de objeto Esto también parece funcionar

Answer 11

object es una alternativa fácil 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>

También puedes intentar embed :

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 />

Answer 12

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