¿Cómo verificar que una página web se carga dentro de un iframe o en la ventana del navegador usando JavaScript?

Un iFrame es un marco o región rectangular en la página web para cargar o mostrar otra página web o documento por separado dentro de ella. Básicamente, un iFrame se usa para mostrar una página web dentro de una página web.

Puede ver más sobre iFrames aquí: HTML iFrames

Puede haber una variedad de razones para verificar si una página web está cargada en un iFrame, por ejemplo, en los casos en que necesitamos ajustar dinámicamente la altura o el ancho de un elemento.

• Comparar la ubicación del objeto con la ubicación principal del objeto ventana: Aquí, simplemente comparamos la ubicación del objeto con la ubicación principal del objeto ventana. Si el resultado es true , la página web está en un iFrame. Si es false , entonces no está en un iFrame.

  <script> function iniFrame() {     if ( window.location !== window.parent.location )     {                // The page is in an iFrames         document.write("The page is in an iFrame");     }      else {                    // The page is not in an iFrame         document.write("The page is not in an iFrame");     } }    // Calling iniFrame function iniFrame(); </script>

  Producción:

  The page is in an iFrame

• Uso de las propiedades window.top y window.self : tanto top como self son objetos de ventana, junto con parent , así que compruebe si la ventana actual es la ventana superior/principal.

  <script>    // Function to check whether webpage is in iFrame function iniFrame() {            if(window.self !== window.top) {                    // !== operator checks whether the operands         // are of not equal value or not equal type         document.write("The page is in an iFrame");     }     else {         document.write("The page is in an iFrame");     } }    // Calling iniFrame function iniFrame(); </script>

  Producción:

  The page is in an iFrame

• Usando la propiedad window.frameElement : tenga en cuenta que esto solo admite páginas web que pertenecen al mismo origen que la página principal en la que está incrustado. La función window.frameElement devuelve el elemento (como iframe y object) en el que está incrustada la página web.

  <script> function iniFrame() {            var gfg = window.frameElement;            // Checking if webpage is embedded     if (gfg) {                    // The page is in an iFrame         document.write("The page is in an iFrame");     }      else {                    // The page is not in an iFrame         document.write("The page is not in an iFrame");     } }    // Calling iniFrame function iniFrame(); </script>

  Producción:

  The page is in an iFrame

  En el código anterior, almacene el elemento en el que está incrustada la página web en la variable gfg . Si la ventana no está incrustada en otro documento, o si el documento en el que está incrustada tiene un origen diferente (como haber sido ubicado desde un dominio diferente), gfg es nulo.