¿Por qué dividir la etiqueta <script> al escribirla dentro del método document.write() en JavaScript?

El código dentro de la etiqueta del script se ejecuta cuando el navegador procesa la etiqueta. El método document.write() se utiliza para eliminar todo el contenido existente del documento HTML e inserta el nuevo contenido especificado en el método document.write() . Sin embargo, antes de que el navegador cargue una página, construye el árbol DOM analizando el marcado HTML. Cada vez que se encuentra una etiqueta de secuencia de comandos, debe ejecutarse antes de continuar con el proceso de análisis. La etiqueta del script se divide cuando se usa dentro del método document.write() porque al analizar el analizador HTML al ver el «</»» de la etiqueta del script dentro del documento.write() considera que es la etiqueta de cierre para la etiqueta del script. dentro del cual document.write()Se encuentra adjunto. Esto da como resultado una ejecución incompleta del contenido de las etiquetas de script externas. En la actualidad, se desaconseja encarecidamente el uso del método document.write() , ya que provoca problemas de rendimiento y es posible que no funcione en absoluto en determinados casos.

Nota: este procedimiento se ha utilizado para incluir archivos jQuery únicamente.

Los siguientes ejemplos implementan el enfoque anterior:

Ejemplo 1: En este ejemplo, usaremos <script> dentro de document.write sin dividir la etiqueta.

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align:center; 
        } 
        h1 { 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1>
      
    <script> 
        document.write(
        "<script><h1>GeeksforGeeks!</h1></script>"); 
          
        document.write(
        "<p>A computer science portal for geeks</p>") 
    </script> 
</body> 
  
</html>

Producción:

Ejemplo 2: En este ejemplo, usaremos <script> dentro del documento. escribe dividiendo la etiqueta.

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align:center; 
        } 
        h1 { 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1>
      
    <script> 
        document.write(
        "<script><h1>GeeksforGeeks!</h1></scr"+"ipt>"); 
          
        document.write(
        "A computer science portal for geeks"); 
    </script> 
</body> 
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *