Inicio>Tutorial de diseño web>Tutorial de JavaScript

Utilice javascript para acceder y operar el dom en el iframe

Autor：Eve Cole Fecha de actualización：2009-06-11 16:22:06

Muchas personas siempre han tenido la idea de que sería fantástico poder operar iframes como quisieran. De esta manera, las páginas estáticas tienen la capacidad de implementar un diseño unificado de varias páginas equivalente a incluir y requerir en segundo plano páginas dinámicas php, jsp y asp.

Con la ayuda de Javascript, podemos cargar dinámicamente el contenido de la página html a la que apunta el atributo del objeto iframe src como fondo. Dicha operación requiere proporcionar dos páginas, una página es la página donde se encuentra el iframe ( nombre de la página: iPage.html ) y la otra página es la página a la que apunta el atributo iframe src ( nombre de la página: srcPage.html ).

iPage.html, dom en <cuerpo>:

  1. < iframe identificación = " identificación " nombre = " iNombre " src = " página src.html " desplazamiento = “ no ” frameborder = " 0 " > </iframe> srcPage.html

,<body>in

  1. dom : <h1> Día de la hermana </h1>  
  2. < p > Desayunar por la mañana, tener una cita al mediodía, cantar karaoke por la tarde y jugar con mi hermano por la noche </ p >

Analicemos cómo operar las dos páginas anteriores con JS en IE y luego analice el método de Firefox y finalmente proporcione la compatibilidad con IE y Firefox. El método del navegador para operar el objeto iframe.

1. Acceda y opere el contenido en el iframe en IE

 

Todo el mundo sabe que iframe es una etiqueta HTML no estándar. Es una etiqueta de diseño múltiple lanzada por el navegador IE. Más tarde, Mozilla también admitió esta etiqueta. (Chismes, jeje)

1. IE lo obtiene a través de document.frames ["IframeName"]. Ejemplo: generamos el contenido

  1. de h1 en srcPage.html en iPage.html . iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;

Encontrará que agregar código a la página no parece generar el contenido deseado. ¿Por qué? Aún no he descubierto esto. Habitualmente agrego window.onload y aparecerá el resultado (Nota: el código JS está escrito en este evento). ¿Alguien que sepa al respecto puede informarme? ¿Por qué? Después del cambio, el código aparece en IE, pero document.frames no está definido en Firefox. Mensaje de error:

  1. ventana onload = ( función . () {  
  2.   alert ( document . frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data )
  3. } )

2. es decir, otra forma es contentWindow para obtenerlo, código

  1. : onload = ( function . () {  
  2.   var iObj = documento . getElementById ( ' iId ' ) .​​
  3.   alert ( iObj.document.getElementsByTagName ( ' h1 ' ) [ 0 ] .firstChild.data ) } ) ; Este método ha pasado
  4. las pruebas

de ie6, ie7, firefox2.0 y firefox3.0. oye oye. (Después de verificar en línea, encontré una vulnerabilidad de desbordamiento de búfer en Mozilla Firefox iframe.contentWindow.focus, que presenta el riesgo de ataques de inyección de script.

Más tarde escuché que esto se podía evitar en segundo plano y me sentí aliviado. Sin embargo, todavía Espero que la nueva versión de Firefox pueda resolverlo. Qué

peligro

  1. ) . 3. Cambie el contenido del título h1 en srcPage.html , código : iObj document . parte de su día ' ;

accede a él a través de contentWindow Los nodos son los mismos que antes.

2. Acceda al contenido de un iframe en Firefox.

Mozilla admite el estándar W3C para acceder al objeto de documento de un iframe a través de IFrameElmRef.contentDocument . A través del estándar, puede escribir un documento menos, código:

  1. var. iObj = document . getElementById ( ' iId ' ) . contentDocument ;
  2. alerta ( iObj . getElementsByTagName ( ' h1
  3. ' ) [ 0 ] . internalHTML = ' Quiero ser parte de su día ' ) ;​​
  4. ' ) [ 0 ] .firstChild data ) ; Ahora

está disponible un método compatible con estos dos navegadores, que consiste en utilizar el método contentWindow.

¡Oye, oye! ¿Puedo operar el iframe como deseo? Si aún te sientes incómodo, puedes incluso reescribir el contenido en el iframe.

3. Reescriba el contenido en el iframe.

A través de designMode (configurando el documento en modo de diseño editable) y contentEditable (configurando el contenido en editable), puede reescribir el contenido en el iframe. Código:

  1. var iObj = documento . getElementById ( ' iId ' ) . contentWindow ;
  2. iObj documento .​​​​​
  3. ​​​​​​​​​​
  4. ​​​​​​​
  5. ​​​​​​​ ​head > ' )
  6. ; iObj documento .​​​​​​​
  7. ​​​​​​ ' </head><body> </body> </html> '
  8. ) ; iObj document close ( )

Para obtener información sobre estos dos objetos, consulte: http://msdn.microsoft.com/en- us/library/ms533720(VS.85).aspx

firebug prueba el rendimiento del código anterior, como se muestra en la figura

Comente iObj.document.designMode = 'On';

iObj.document.contentEditable

= true;


El efecto no ha cambiado y la eficiencia del tiempo es casi tres veces mayor que antes de la anotación. oye oye. Esos dos objetos se refieren a los métodos de escritura de algunas personas en Internet para reescribir el contenido en el iframe. De hecho, no es necesario utilizar designMode y contentEditable a menos que existan otras necesidades.

4. Altura adaptable del iframe

Con los principios anteriores, es bastante sencillo implementar esto, simplemente establezca el valor de altura del iframe al valor de altura del documento dentro de él. Código

  1. : ventana .​​​ () {  
  2. var   iObj = document . getElementById ( ' iId ' ) ;
  3. iObj . height = iObj . documentWindow . documentElement } ) ;​​
  4. ​​

​debido a este término técnico web, ¡oye, apestoso!

Materiales de referencia:

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/ diseño de página web/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
Artículos relacionados