Quiero poner sólo una pequeña parte de un sitio web en un iframe. ¿Cómo puedo hacerlo? Por lo general, cuando configuro un iframe para un sitio web (digamos yahoo) se obtiene todo el sitio web ... Supongamos que sólo quiero una pequeña parte del sitio web, ¿cómo lo hago?
¿Es posible poner márgenes en un iframe de un sitio web?
Quiero poner un iframe de un sitio web en mi sitio web. (si tiene sentido)
Gracias de antemano :D
En la mayoría de los casos la referencia es externa y usted no tiene control sobre la página externa. Por lo tanto, tiene que desplazar el contenido del IFRAME a la posición deseada. Esto, por supuesto, es imposible. Sí, hay algunos trucos de JavaScript, pero todos son una mala solución, porque el desplazamiento se produce sólo después de que la página se carga. La solución
Puedes envolver el IFRAME en un div y desplazar el contenido del DIV usando las propiedades CSS absolutas TOP y LEFT.
Aquí hay un ejemplo:
#my-div
{
width : 400px;
height : 200px;
overflow : hidden;
position : relative;
}
#my-iframe
{
position : absolute;
top : -100px;
left : -100px;
width : 1280px;
height : 1200px;
}
Aquí tienes un DIV con dimensiones 400x200px. Ahora moviendo el IFRAME dentro de ella se puede colocar en el lugar correcto.
<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>
Esto no puede hacerse de forma fiable debido a la política del mismo origen y a las restricciones de iframe relacionadas.
La política del mismo origen es un concepto de seguridad importante para varios lenguajes de programación del lado del navegador, como JavaScript. La política .. impide el acceso a la mayoría de los métodos y propiedades a través de páginas en diferentes sitios.
Si fuera su sitio web en su sitio web [o un proxy al sitio de destino] entonces JavaScript en el padre podría modificar el DOM o CSS del iframe incrustado como se desee ..
Si el sitio web de destino está dispuesto a comunicar datos a través de otros medios (incluyendo XDR/XHR+CORS), entonces estos podrían ser potencialmente utilizados como hack-a-bouts también. Sin embargo, no existe una solución general para esta tarea.
Incluso jQuery.load
(que utiliza XHR) está limitado por la misma política de origen:
Debido a las restricciones de seguridad del navegador, la mayoría de las peticiones "Ajax" están sujetas a la same origin policy; la petición no puede recuperar con éxito datos de un dominio, subdominio o protocolo diferente.
Un `<iframe>te da una ventana completa con la que trabajar. La forma más directa de hacer lo que quieres es que tu servidor te dé una página completa que sólo contenga el fragmento que quieres mostrar.
Como alternativa, puedes usar un simple <div>
y usar la función load
de jQuery para cargar toda la página y extraer sólo la sección que quieras:
$('#target-div').load('http://www.yahoo.com');
Puede que necesite hacer otras cosas, y una diferencia significativa es que el contenido pasará a formar parte de la página principal en lugar de estar segregado en una ventana aparte.
No podrá manipular la URL para obtener sólo una parte de la página. Así que lo que usted querrá hacer es tomar el contenido de la página a través del lenguaje del lado del servidor de su elección y luego analizar el HTML. A partir de ahí se puede agarrar el DIV específico que está buscando y luego imprimirlo en la pantalla. También puede utilizar para eliminar el contenido no deseado.
Con PHP puedes usar file_get_contents()
para leer el archivo que quieres analizar y luego usar DOMDocument
para analizarlo y obtener el DIV que quieres.
Esta es la idea básica. Esto no está probado, pero debe apuntar en la dirección correcta:
$page = file_get_contents('http://touch.facebook.com');
$doc = new DOMDocument();
$doc->loadHTML($page);
$divs = $doc->getElementsByTagName('div');
foreach($divs as $div) {
// Loop through the DIVs looking for one withan id of "content"
// Then echo out its contents (pardon the pun)
if ($div->getAttribute('id') === 'content') {
echo $div->nodeValue;
}
}