1. ¿Qué es un iframe?
El marco se usa para mostrar la página dentro de la página, el uso de iframe creará un marco en línea (es decir, un marco en línea) que contiene otro documento.
<iframe src="URL"></iframe>
En segundo lugar, los atributos comunes del iframe.
1 、 ancho
Definir el ancho del iframe
2 、 altura
Definir la altura del iframe
3 、 nombre
Especifica el nombre del iframe.
4 、 borde del marco
Especifica si se muestra el borde, el valor es 0 (no se muestra) y 1 (se muestra)
5 、 desplazamiento
Especifique si desea mostrar la barra de desplazamiento en el iframe, el valor es sí, no, automático
6、src
Establecer la dirección del iframe (página/imagen)
7、srcdoc
Se utiliza para reemplazar el contenido en html y el cuerpo en iframe (IE no es compatible)
8 、 caja de arena
Restringir el contenido del iframe, el valor es
- permitir-formularios
- permitir-mismo-origen
- permitir-scripts
- permitir navegación superior
...
Soporte IE10+
3. Obtenga el contenido en el iframe.
1. Obtén el iframe
var iframe = document.getElementById("iframe1");
2. Obtenga el objeto de ventana del iframe.
- a través de iframe.contentWindow
var iwindow = iframe.contentWindow;
El objeto de ventana también se puede obtener mediante window.frames['name']
var iwindow = window.frames["name"];
3. Obtenga el objeto de documento del iframe.
- Obtener el objeto documento del iframe
var idoc = iwindow.document;
Cuarto, obtenga el contenido principal en el iframe.
-
Obtenga el objeto de ventana de nivel superior
Obtenga el objeto de ventana de nivel superior a través de window.parent (iframe se puede usar en varias capas) -
Obtenga el objeto de ventana del contenedor de nivel superior
Obtenga el objeto de ventana (es decir, el documento cuando se abre la página) a través de window.top -
Devuelve su propio objeto de ventana
Devuelve su propio objeto de ventana a través de window.self
5. Encuesta larga de iframe
El sondeo largo consiste en ejecutar la función original nuevamente cuando el estado listo de ajax = 4.
Lo mismo ocurre con el uso de iframe aquí, cree un iframe de forma asincrónica y luego vuelva a cargarlo.
var iframeCon = docuemnt.querySelector('#container'),
text; //传递的信息
var iframe = document.createElement('iframe'),
iframe.id = "frame",
iframe.style = "display:none;",
iframe.name = "polling",
iframe.src = "target.html";
iframeCon.appendChild(iframe);
iframe.onload = function () {
var iloc = iframe.contentWindow.location,
idoc = iframe.contentDocument;
setTimeout(function () {
text = idoc.getElementsByTagName('body')[0].textContent;
console.log(text);
iloc.reload(); // 刷新页面,再次获取信息，并且会触发 onload 函数
}, 2000);
}
De esta forma, se puede lograr el efecto del sondeo largo ajax.
Por supuesto, aquí solo usamos recargar para obtener, y también podemos agregar iframe y eliminar iframe para enviar información, que se aplican de acuerdo con escenarios específicos.
Además, los archivos js se pueden cargar de forma asincrónica en el iframe, pero el iframe y la página de inicio comparten el grupo de conexiones, que ahora está básicamente prohibido por XHR y la devolución de llamada dura.
6. Iframe responsivo: inserción de anuncios
Los anuncios generalmente no tienen nada que ver con el texto original. Si están anidados directamente debajo de un determinado div, el diseño de la página web estará desordenado y será necesario introducir archivos css y js adicionales, lo que reduce en gran medida la seguridad de la página web. . Todas estas desventajas se pueden solucionar utilizando iframe.
El iframe puede entenderse como una zona de pruebas, el contenido interno puede ser controlado completamente por la ventana superior y el estilo CSS de la página de inicio no invadirá el estilo dentro del iframe.
Por defecto, el iframe tendrá su propia barra de desplazamiento y no estará en pantalla completa. Si deseas adaptarlo al iframe:
1. Retire la barra de desplazamiento
<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>
2、设置 iframe 的高为 body 的高
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;
Además se pueden añadir otros atributos de decoración:
| Atributos | Efecto |
|---|---|
| permitir transparencia | verdadero o falso si se debe permitir que el iframe sea transparente, el valor predeterminado es falso |
| permitir pantalla completa | verdadero o falso si se permite el iframe en pantalla completa, el valor predeterminado es falso |
7. Seguridad del iframe
1. Páginas web anidadas
El iframe tiene prioridad de clic. Cuando alguien hace clic en la página de inicio falsa, si hace clic en el iframe, operará la página del iframe de forma predeterminada. Por lo tanto, los sitios web de phishing utilizan esta técnica para inducir a los usuarios a hacer clic.
Para evitar que el sitio web sea objeto de phishing, puede utilizar window.top para evitar que la página web tenga un iframe, lo que significa que su página web no se puede anidar en ninguna página web:
// iframe2.html
if (window != window.top) {
window.top.location.href = correctURL;
}
2. Opciones de X-Frame
X-Frame-Options es el encabezado correspondiente, que describe principalmente los permisos de iframe del recurso web del servidor. Hay 3 opciones:
- DENEGAR: la página actual no se puede anidar en un iframe, incluso si está anidada en una página con el mismo nombre de dominio, y los iframes anidados no están permitidos en páginas web
- SAMEORIGIN: la dirección de la página iframe solo puede ser una página con el mismo nombre de dominio
- ALLOW-FROM: se puede cargar en el iframe de la URL de origen especificada.
Ejemplo simple:
X-Frame-Options: DENY
拒绝任何 iframe 的嵌套请求
X-Frame-Options: SAMEORIGIN
只允许同源请求，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入
X-Frame-Options: ALLOW-FROM http://s3131212.com
只允许指定网页的 iframe 请求，不过兼容性较差 Chrome 不支持
X-Frame-Options en realidad está entregando el control js del front-end sobre el iframe al servidor para su procesamiento.
// js
if (window != window.top) {
window.top.location.href = window.location.href;
}
// 等价于
X-Frame-Options: DENY
// js
if (top.location.hostname != window.location.hostname) {
top.location.href = window.location.href;
}
// 等价于
X-Frame-Options: SAMEORIGIN
Este atributo es una restricción importante en el iframe de la página. Sin embargo, hay más de un encabezado relacionado con el iframe. También existe una Política de seguridad de contenido, que también puede restringir el iframe.
3. caja de arena
sandbox se usa para establecer un modelo de sandbox para el iframe especificado para limitar más permisos de iframe
sandbox es un nuevo atributo de h5, compatible con IE10+.
La forma de habilitarlo es usar el atributo sandbox:
<iframe sandbox src=”...”></iframe>
Esto impone una serie de restricciones en la página iframe:
- script script no se puede ejecutar
- No se puede enviar la solicitud ajax
- No se puede utilizar el almacenamiento local, es decir, localStorage, cookies, etc.
- No se pueden crear nuevas ventanas emergentes y ventanas
- No puedo enviar el formulario
- No es posible cargar complementos adicionales como flash, etc.
Al mismo tiempo, los permisos se pueden relajar un poco. Realice algunas configuraciones simples en la zona de pruebas
<iframe sandbox=”allow-same-origin” src=”...”></iframe>
Los elementos de configuración más utilizados son:
| configuración | Efecto |
|---|---|
| permitir-formularios | Permitir envío de formulario |
| permitir-scripts | ejecutar guión |
| permitir-mismo-origen | Permitir solicitudes del mismo dominio, como ajax, almacenamiento |
| permitir-navegación-superior | Permitir que iframe domine window.top para saltar de página |
| permitir ventanas emergentes | Permitir que aparezcan nuevas ventanas en el iframe, como window.open, target="_blank" |
| permitir-puntero-bloqueo | El mouse se puede bloquear en el iframe, principalmente relacionado con el bloqueo del mouse. |
Puede agregar los permisos que están permitidos en el sandbox.
<iframe sandbox=”allow-forms allow-same-origin allow-scripts” src=”...”></iframe>
Esto puede garantizar la ejecución del script js, pero prohibir la ejecución de javascript en el iframe top.location = self.location
8. Limitaciones del iframe
1. La creación es 1-2 órdenes de magnitud más lenta que los elementos DOM normales.
La creación de iframe es 1-2 órdenes de magnitud más lenta que la creación de otros elementos DOM, incluidos scripts y CSS. La página que usa iframe generalmente no contiene demasiados iframes, por lo que el tiempo dedicado a crear nodos DOM no representará una gran proporción. . Pero trae algunos otros problemas: evento de carga y grupo de conexiones (grupo de conexiones)
2. Bloquear la carga de la página
Es muy importante activar el evento de carga de la ventana a tiempo. El evento onload se activa para detener el indicador de "ocupado" del navegador, indicando al usuario que la página actual ha terminado de cargarse. Cuando el evento de carga se retrasa, le da al usuario la impresión de que la página es muy lenta.
El evento de carga de la ventana debe activarse después de que se hayan cargado todos los iframes (incluidos los elementos internos). En Safari y Chrome, configurar dinámicamente el SRC del iframe a través de JavaScript puede evitar esta situación de bloqueo.
3. El único grupo de conexiones.
El navegador solo puede abrir una pequeña cantidad de conexiones al servidor web. Los navegadores más antiguos, incluidos Internet Explorer 6 y 7 y Firefox 2, solo pueden abrir dos conexiones a un nombre de dominio (nombre de host) al mismo tiempo. Este límite de número se ha incrementado en las versiones más recientes del navegador. Safari 3+ y Opera 9+ pueden abrir 4 conexiones a un dominio al mismo tiempo, Chrome 1+, IE 8 y Firefox 3 pueden abrir 6 conexiones al mismo tiempo.
En la mayoría de los navegadores, la página principal y el iframe que contiene comparten estos enlaces. Esto significa que el iframe puede consumir todas las conexiones disponibles mientras carga recursos, bloqueando la carga de los recursos de la página principal. Por supuesto, esto está bien si el contenido del iframe es más importante que el contenido de la página principal. Pero normalmente, el contenido del iframe es menos importante que el contenido de la página principal. No vale la pena utilizar las conexiones disponibles en el iframe en este momento. Una solución es configurar dinámicamente el SRC del iframe después de cargar los elementos importantes en la página principal.
4. Malo para el SEO
Los rastreadores de los motores de búsqueda no pueden interpretar los iframes.
Además, el iframe en sí no es un lenguaje dinámico y tanto los estilos como los scripts deben importarse adicionalmente. En resumen, los iframes deben utilizarse con precaución.