Change language
Python.Engineering Wiki Javascript Establece Iframe Src

Javascript Establece Iframe Src

code Python module | COM PHP module | dis Python module | Ev PHP module | exp | File handling | html Python module | http Python module | io Python module | JavaScript | join | os Python module | PS PHP module | Python functions | re Python module | resource Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

La etiqueta iframe HTML incrusta un documento web en una página web. Un documento incrustado puede ser un PDF, una página web u otro activo. El atributo src define la ubicaciòn del recurso incrustado.

Puede incrustar el contenido de un documento web , como un PDF o un mapa de Google Maps, en otra página, usando HTML.

Ahì es donde entra el HTML "iframe". El HTML La etiqueta "iframe" se utiliza para insertar objetos externos, como otras páginas web, en una √∫nica página web. Este tutorial explicará, con ejemplos, còmo utilizar la etiqueta HTML "iframe" para insertar recursos web en una página web.

HTML iframe

Los iframes HTML, o marcos en lìnea, muestran documentos web externos en una página. Puede insertar mapas, archivos PDF, vìdeos u otros recursos mediante la etiqueta "iframe" Etiqueta HTML.

El còdigo almacenado dentro de un marco en lìnea es independiente del resto de una página web. Los estilos o JavaScript que se apliquen a su página web no se aplicarán dentro del iframe.

Aquì está la sintaxis de la etiqueta HTML "iframe":

La etiqueta "iframe" se utiliza para crear un iframe. Hemos especificado un atributo iframe src. El atributo contiene la ubicaciòn de los elementos HTML que queremos incrustar en nuestra página web. Debe ser una URL HTML .

Ejemplo de còdigo HTML de iframe

Veamos un ejemplo para explorar còmo funciona la etiqueta "iframe".

Suponga que estamos construyendo un sitio web para una sociedad històrica local de Washington, DC. Quieren que creemos una página con un video incrustado de Khan Academy sobre el nacimiento de la Constituciòn de los Estados Unidos. Esta página es material recomendado para cualquier persona interesada en unirse a la sociedad. Podrìamos usar el siguiente còdigo para insertar el video en nuestro sitio web:

Nuestro còdigo devuelve:

B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf

Usamos un elemento "iframe" para incrustar un recurso web externo en nuestra página web. El recurso web que hemos incrustado es el enlace " https://www.youtube.com/embed/Rk8dCnKIfP4 & rdquo ;. Esto apunta al video que la sociedad històrica quiere que se muestre en su sitio web.

Altura y ancho de iframe HTML

El atributo de altura y el atributo de ancho se utilizan para establecer el tama√±o de un iframe. Supongamos que la sociedad històrica local de Washington DC quiere que hagamos el video más grande en su sitio.

Vamos a establecer el ancho del video de YouTube en 500 pìxeles y la altura en 300 pìxeles:

Nuestro còdigo devuelve:

YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ

nuestro video incorporado ahora es de 500 pìxeles de ancho por 300 pìxeles de alto en nuestro documento HTML. Esto hace que sea más fácil para las personas ver nuestro video en el sitio web.

Alternativamente, podrìamos establecer el ancho y alto de la etiqueta iframe usando CSS . Pero, debido a que HTML admite un atributo de altura y peso, esto no es necesario.

Elimine el borde del iframe HTML

Cuando esté trabajando con "iframe" etiqueta, notará que su contenido está rodeado por un borde. Si desea eliminar este borde, puede utilizar border: none; Atributo CSS .

La sociedad històrica nos ha pedido que eliminemos el borde alrededor del video de YouTube de su sitio. Aquì está el còdigo que usarìamos para eliminar el borde:

Nuestro còdigo regresa:

GqIGiI370xPK2xxk C LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF

Nuestro video ya no tiene borde.

Destinos de enlaces de iframe HTML

Además, se pueden usar etiquetas "iframe" como marco de destino para un enlace. Podemos configurar un iframe para que sea el marco de destino de un enlace utilizando el atributo de destino en un enlace HTML. El atributo HTML de destino debe hacer referencia al atributo de nombre de un "iframe".

Supongamos que la sociedad històrica tuviera otro video que quisieran que mostráramos en su sitio web sobre el artìculo I de la Constituciòn de los Estados Unidos. Este video también fue publicado por Khan Academy.

Cuando se hace clic en el texto Nacimiento en la página web, el vìdeo Nacimiento de la Constituciòn de EE. UU. debe mostrarse en el iframe. Cuando el texto Artìculo Se hace clic en, el video sobre el Artìculo I de la Constituciòn deberìa ser renderizado.

Podrìamos usar el siguiente còdigo para realizar esta tarea:

Nuestro còdigo devuelve:

RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr

Por defecto, el vìdeo en el nacimiento de la Constituciòn de Estados Unidos se muestra en el iframe. El contenido del iframe cambia para apuntar al video de Khan Academy sobre el Artìculo I de la Constituciòn. Esto sucede cuando hacemos clic en la URL del Artìculo I.

Nuestro iframe se redirige al video sobre el nacimiento de la Constituciòn si ese video a√∫n no aparece cuando hacemos clic en Nacimiento.

Conclusiòn

La etiqueta HTML "iframe" incrusta recursos web externos, como páginas web, en otra página web. Esto es √∫til si desea agregar mapas, archivos, videos u otras páginas web a su sitio.

Este tutorial explica, con referencia a ejemplos, còmo usar HTML "iframe" etiqueta para representar recursos web externos en una página web. ¬°Ahora tiene el conocimiento que necesita para comenzar a usar la etiqueta "iframe" como un profesional!

Para obtener más informaciòn sobre la codificaciòn en HTML, lea nuestro guìa para aprender el lenguaje de marcado de hipertexto .