0

tengo una pagina principal que redirecciona a otra pagina llamada example.com

el codigo de la pagina principal es:

<!DOCTYPE html>
<html>
<body>

<h2>Redirect to a Webpage</h2>
<p>The replace() method replaces the current document with a new one:</p>

<button onclick="myFunction()">Replace document</button>

<script>
function myFunction() {
  location.replace("https://www.example.com")
}
</script>

</body>
</html>

example.com muestra "Original Webpage" si entras directamente el codigo de example.com es :

<!DOCTYPE html>
<html>
<body>

<h2>Original Webpage</h2>
</body>
</html>

quiero que al dirigir desde la pagina principal a example.com , example.com muestre "modified page" . entonces deberia cambiar <h2>Original Webpage</h2> desde pagina principal antes de entrar a example.com

1 respuesta 1

0

A nivel de navegador, el JavaScript se ejecuta en cada página, no veo como cambiar el contenido de otra página a la que estas redireccionando desde la actual, que yo sepa puedes abrir (nueva pestaña) o redireccionar. Para lo que intentas hacer hay un pequeño truco, donde el codigo para hacer el cambio esta en la página de destino, por ejemplo, en local con dos ficheros HTML:

<!DOCTYPE html>
<html>
<body>
    <h2>Redirect to a Webpage</h2>
    <p>The replace() method replaces the current document with a new one:</p>

    <button onclick="myFunction()">Replace document</button>

    <script>
        function myFunction() {
            location.replace("./2.html")
        }
    </script>
</body>
</html>

y

<!DOCTYPE html>
<html>
<body>
    <script>
        const body = document.querySelector('body');
        body.style.display = 'none';
    </script>
<h2>Original Webpage</h2>

    <script>
        window.onload = () =>
        {
            document.querySelector('h2').innerText = 'modified page';
            body.style.display = 'block';
        }
    </script>
</body>
</html>

En el código de esta última página aprovecho que la ejecución de JS bloquea el renderizado de la página para ejecutar el primer script. Este oculta todo el contenido visible de la página aplicando un display: none al body, a continuación se ira cargando el contenido de la página pero sin que se muestre contenido.

El segundo script se ejecuta cuando el contenido de la ventana esta cargado, entonces modifico el contenido del título y vuelvo a hacer visible el contenido de la página. El usuario solo verá el título modificado. Si necesitas que el título en una página solo cambie si se abre desde otra página concreta puedes añadir un marcador a session storage por ejemplo en la primera página y comprobar en la segunda si se encuentra antes de ejecutar los scripts.

En cuanto al orden de los scripts, el segundo, para funcionar, puede estar en cualquier parte del documento, es preferible situarlo en el head si bien lo puse en ese orden para no complicarlo, el primer script si es importante situarlo inmediatamente tras la apertura del body, para que pueda encontrar el nodo y a su vez no se haya cargado aún el título de la página.

Con marcador en sesión, hay que modificar el script de la primera página:

<!DOCTYPE html>
<html>
<body>
    <h2>Redirect to a Webpage</h2>
    <p>The replace() method replaces the current document with a new one:</p>

    <button onclick="myFunction()">Replace document</button>

    <script>
        function myFunction() // void
        {
            sessionStorage.setItem('redirection-script', 1);
            location.replace("./2.html")
        }
    </script>
</body>
</html>

y la segunda:

<!DOCTYPE html>
<html>
<body>
    <script>
        const isRedirect = sessionStorage.getItem('redirection-script');
        if (isRedirect) {
            document.querySelector('body').style.display = 'none';
            sessionStorage.removeItem('redirection-script');
        }
    </script>

    <h2>Original Webpage</h2>
    <script>
        if (isRedirect) {
            document.querySelector('h2').innerText = 'modified page';
            document.querySelector('body').style.display = 'block';
        }
    </script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.