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.Alternativa a iFrames con HTML5
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, está 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 se mantiene como una buena forma de hacerlo.
Puede utilizar el objeto y la inserción, 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>
que no es nueva, pero todavía funciona. Aunque no estoy seguro de si tiene la misma funcionalidad.
Gracias montones, me salvó la carga de la SDK para facebook como caja. – Techagesite
Puede usar un XMLHttpRequest para cargar una página en un div (o en cualquier otro elemento de su página realmente). Una función exemple 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 Sever es capaz, también se puede usar PHP para hacer esto, pero ya que usted está pidiendo un método HTML5, esto debería ser todo lo que necesita.
Op pregunta por dominios cruzados, esta respuesta no es válida. –
Cargando contenido de otros dominios usando XMLHttpRequest es bloqueado por la mayoría de los navegadores. –
Si usted quiere hacer esto y controlar el servidor desde el que se está sirviendo la página base o contenido, puede utilizar Cruz Origen de intercambio de recursos (http://www.w3.org/TR/access-control/) para permitir JavaScript en el cliente para cargar datos en un <div> través 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();
ya por el eje central de toda esta operación, es necesario escribir código para el servidor que va a dar a los clientes la cabecera Access-Control-Allow-Origin, especificando qué dominios desea que el código de cliente para poder acceder a través de XMLHttpRequest(). El siguiente es un ejemplo de código PHP se puede incluir en la parte superior de la página con el fin de enviar estos encabezados para los clientes:
<?php
header('Access-Control-Allow-Origin: http://api.google.com');
header('Access-Control-Allow-Origin: http://some.example.com');
?>
Esto también parece funcionar, aunque W3C especifica no es la intención "para una aplicación externa (por lo general 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
un iframe sigue siendo la mejor manera de descargar cruz-do contenido visual principal. 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 han mencionado otros, 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 adopción de API web para obtener información de dominios cruzados. Por lo general, las API web simplemente devuelven datos y no HTML.
Básicamente hay 4 formas de HTML incrustado en una página web: contenido
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 otras drawbacks.HTML5 Web Components. 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 hace que sea una gran solución con muchos casos de uso interesantes: dividir una aplicación en componentes empaquetados que puede distribuir como bloques de construcción, mejorar la gestión de dependencias para evitar la redundancia, la organización del código, etc. Aquí es un ejemplo trivial:
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">
Native compatibility sigue siendo un problema, pero puede utilizar un polyfill para que funcione en evergreen browsers Hoy.
componentes web HTML5 es interesante. –
Sé que esta publicación es un poco antigua pero solo quiero comentar: En referencia a AJAX, "No es idea porque se basa en técnicas de scripting" ... Entonces, ¿qué hay de malo con el uso de scripts? AJAX es el favorito indiscutible de estas opciones y se está convirtiendo rápidamente en el estándar. – nmg49
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 puede intentar embed:
<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 />Aunque no hay un reemplazo perfecto, he estado trabajando en algo, está construido para ser fácil y me complace decir que funciona (gracias al junkfoodjunkie)
Básicamente, mi sistema actual usa algunos php básicos/server combo para cargar y luego guardar el archivo en el servidor, recién comencé el proyecto hoy, así 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 en 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í se muestra un ejemplo:
integratedmedia.ml/get/?link=google.com
el archivo descargado se encuentra ahora en
integratedmedia.ml/get/gettmp/ google.com.html
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 una working example de inyectar un contenido en la página BBC News casa.
<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>puede utilizar etiqueta de objeto Esto también parece funcionar
que necesito para cargar contenido de Google. pero Google no puede ser iframado, ¿cuál es la alternativa? – Mike
@Mike, la alternativa sería usar la API para el servicio que desea utilizar. Google proporciona API RESTful para la mayoría de sus servicios. –