¿Puede un iframe mostrar solo una parte determinada de la página?

6 minutos de lectura

Avatar de usuario de MANnDAaR
MANDAAR

Estoy trabajando en iframes y necesito mostrar cierta parte de la página [say, the top right ] en un iframe con aproximadamente 300 px de ancho y 150 px de alto.

Ejemplo:

Digamos que quería poner un iframe de www.example.com/portfolio.php en una página, pero tenga el iframe dimensionado para mostrar solo el “portafolio-deportes“sección en el parte superior derecha.

¿Cómo puedo conseguir esto?

MANIFESTACIÓN

[Thanks to Pointy]

  • ¿El iframe está en el mismo dominio que la página principal?

    –Nick Craver

    17 de julio de 2010 a las 15:27

  • No creo que usar un <iframe> es realmente la manera correcta de hacer esto.

    – Puntiagudo

    17 de julio de 2010 a las 15:36

Avatar de usuario de Pointy
puntiagudo

Un <iframe> le da una ventana completa para trabajar. La forma más directa de hacer lo que desea es que su servidor le proporcione una página completa que solo contenga el fragmento que desea mostrar.

Como alternativa, puede usar un simple <div> y use la función “cargar” de jQuery para cargar toda la página y seleccionar solo la sección que desea:

$('#target-div').load('http://www.example.com/portfolio.php #portfolio-sports');

Es posible que deba hacer otras cosas, y una diferencia significativa es que el contenido se convertirá en parte de la página principal en lugar de segregarse en una ventana separada.

  • Gracias puntiagudo. Es justo lo que estaba viendo: “iframe omitido”.

    – MANDAAR

    17 de julio de 2010 a las 16:02

  • no estoy seguro, pero si el html cargado contiene un formulario POST, no estoy seguro de que el envío al servidor funcione debido a restricciones de seguridad (misma política de origen).

    – Pablo

    11 de noviembre de 2014 a las 23:38

  • @Paolo bueno, si se trata de contenido de un dominio diferente, entonces el .load() no funcionará a menos que el sitio de origen establezca encabezados CORS apropiados. Si se carga, entonces un POST debería funcionar bien.

    – Puntiagudo

    11/11/2014 a las 23:50

  • Tenga en cuenta que esto no ejecutará ningún script/estilo que se cargue desde una página a través de jQuery load(). Tienes que manejar esto con $.getScript entre otras cosas.

    – adamj

    15 de enero de 2016 a las 5:01

  • más posibilidades de problemas cors

    – Kurkula

    6 sep 2017 a las 20:19

Avatar de usuario de Shiku gfa
Shiku gfa

Tengo este trabajo bueno para mí.

<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>

¿Funciona esto para usted o no, háganoslo saber?

Fuente: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html

  • Creo que esta es la solución correcta, la respuesta aceptada no cumple con el requisito con iframe.

    – Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

    6 de enero de 2017 a las 8:10

  • Solución perfecta. Muchas gracias.

    – Vivek Sánchez

    7 de febrero de 2017 a las 7:22

  • el desplazamiento no no funciona para mí en la aplicación reaccionar js

    – yaswanthkoneri

    21 de noviembre de 2019 a las 6:46

  • la mejor respuesta y solucion

    – h1h2

    21 oct 2020 a las 13:34

avatar de usuario de dmatamales
dmatamales

Necesitaba un iframe que incrustara una parte de una página externa con una barra de desplazamiento vertical, recortando los menús de navegación en la parte superior e izquierda de la página. Pude hacerlo con HTML y CSS simples.

HTML

<div id="container">
    <iframe id="embed" src="http://www.example.com"></iframe>
</div>

CSS

div#container
{
    width:840px;
    height:317px;
    overflow:scroll;     /* if you don't want a scrollbar, set to hidden */
    overflow-x:hidden;   /* hides horizontal scrollbar on newer browsers */

    /* resize and min-height are optional, allows user to resize viewable area */
    -webkit-resize:vertical; 
    -moz-resize:vertical;
    resize:vertical;
    min-height:317px;
}

iframe#embed
{
    width:1000px;       /* set this to approximate width of entire page you're embedding */
    height:2000px;      /* determines where the bottom of the page cuts off */
    margin-left:-183px; /* clipping left side of page */
    margin-top:-244px;  /* clipping top of page */
    overflow:hidden;

    /* resize seems to inherit in at least Firefox */
    -webkit-resize:none;
    -moz-resize:none;
    resize:none;
}

Avatar de usuario de Shuvojit Das
Shuvojit Das

<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;">
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;">
</div>
<iframe src="http://example.com/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

Avatar de usuario de TangentSpy
TangenteEspía

De alguna manera jugueteé y de alguna manera conseguí que funcionara:

<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>

Creo que es la primera vez que se publica este código, así que compártelo.

  • Creo que este #interior debería ser parte de un sitio web externo que no estará bajo nuestro control.

    – Kurkula

    06/09/2017 a las 20:20

Avatar de usuario de la comunidad
Comunidad

Establezca el iframe en el ancho y la altura adecuados y establezca el atributo de desplazamiento en “no”.

Si el área que desea no se encuentra en la parte superior izquierda de la página, puede desplazar el contenido al área adecuada. Consulte esta pregunta:

¿Desplazar un iframe con javascript?

Creo que solo podrá desplazarse si ambas páginas están en el mismo dominio.

  • Creo que este #interior debería ser parte de un sitio web externo que no estará bajo nuestro control.

    – Kurkula

    06/09/2017 a las 20:20

Avatar de usuario de Stephen Ostermiller
Esteban Ostermiller

Suponiendo que está utilizando un iframe para importar contenido disponible para el público pero que no es de su propiedad en su sitio web, siempre puede usar el ancla de la página para dirigir su iframe para que se cargue donde desee.

Primero, crea un iframe con el ancho y el alto necesarios para mostrar los datos.

<iframe src="http://www.example.com/page2.html" width="200px" height="100px"></iframe>

En segundo lugar, instale un complemento como Show Anchors 2 para Firefox y utilícelo para mostrar todos los anclajes de página en la página que le gustaría mostrar en su iframe. Encuentre el punto de anclaje que desea que use su marco y copie la ubicación del anclaje haciendo clic derecho sobre él.

(Puede descargar e instalar el complemento aquí => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/)

En tercer lugar, use la dirección web copiada con el punto de anclaje como su fuente de iframe. Cuando se cargue el marco, mostrará la página que comienza en el punto de anclaje que especificó.

<iframe src="http://www.example.com/page2.html#anchorname_1" width="200px" height="100px"></iframe>

Esa es la lista de instrucciones condensada.

¿Ha sido útil esta solución?