Digamos que tengo una página de inicio que contiene un enlace a una segunda página que tiene algún tipo de contenido, digamos un elemento <details>. Ahora, el elemento <details> en la segunda página está cerrado "por defecto", pero me gustaría que el enlace en la página de inicio redirija al elemento <details> y lo abra.

Me gustaría hacer esto con html / css y javascript básicos. Esto es lo que tengo hasta ahora:
home.html

<html>
  <head>
    <script type="text/javascript">
      window.onload = function() {
        var a = document.getElementById("mylink");
        a.onclick = function() {
          var b = document.getElementById("mydetails");
          b.open = true;
          b.style.color = "red"; // just to try another property
          return false;
        }
      }
    </script>
  </head>
  <body>
    <h1>Home Page</h1>
    <h2><a id="mylink" href="second_page.html#mydetails">Go to 2nd page</a></h2>
  </body>
</html>

Second_page.html

<html>
  <body>
    <h1>2nd page</h1>
    <details id="mydetails" open="false">
      <summary>Hello,</summary>
    </details>
  </body>
</html>

Desafortunadamente, el código se ejecuta, pero cuando hago clic en el enlace de la página de inicio, no se abre el <details> en la segunda página. ¿Cómo podría hacer esto?

Los puntos de bonificación si pudiera pasar como parámetros a la función JS los identificadores tanto del enlace como del elemento de destino.

Preguntas relacionadas:

  1. ¿Cómo usar un enlace para llamar a JavaScript?, de donde obtuve la mayor parte de mi código
  2. Abrir automáticamente el elemento
    en la llamada de identificación, esto parece ser lo que quiero lograr, pero no sé cómo hacerlo funcionar
0
Pier Paolo 25 feb. 2017 a las 19:43

2 respuestas

La mejor respuesta

No puede modificar otra página que no esté activa con Javascript. Javascript solo se ejecuta en la página activa y puede modificar el DOM de la página activa. Deberá enviar el valor a la página siguiente.

Almacenamiento de sesión HTML5 para enviar datos:

    home.html
    <script type="text/javascript">
        window.onload = function() {
            var a = document.getElementById("mylink");
            a.onclick = function() {
                localStorage.setItem("open", "true");
            }
        }
    </script>

    second_page.html
    <script>
         var val = localStorage.getItem("open");
         if (val == "true") {
             var b = document.getElementById("mydetails");
             b.open = true;
             b.style.color = "red";
             localStorage.removeItem("open");
          }
    </script>
1
Ayush 25 feb. 2017 a las 17:01
function(link,target){
  //set the click function of the given id (link)
  $('#'+link).click(function() {
    //get the details panel from the next page
    var details = $(target+'#mydetails');
    //set its state to true
    details.open = true;
    //redirect to that page
    window.location.replace(details);
});
}

Algo en este sentido debería funcionar. Esto está usando jquery, espero que esté bien.

1
Shtut 25 feb. 2017 a las 16:58