4

Tengo una página llamada formulario.aspx, la cual contiene un formulario con el siguiente código:

<textarea name="summernote3" id="summernote" runat="server"></textarea>
<img id="Img2" alt="Editar en pantalla Completa" src="../imagenes/botones/editorpantalla.png" class="clase" onclick="ZoomEdit2('<%=summernote.ClientID %>');" />

Ésta es la función que he generado para enviar la información capturada en el textarea hacia otra página llamada editar.aspx

function ZoomEdit2(campo) {
var nw = window.open("../Plugins/editar.aspx?campo=" + campo +"","FORMATO","resizable=1,width=1100,height=600, scrollbars=1");
nw.focus();
}

En la segunda página editar.aspx, quiero obtener el valor del primer textarea y asignarlo a un otro textarea y viceversa.

Estuve intentando con algo de ajaxcontrol, pero no logro obtener los resultados deseados:

var markupStr = $('#summernote').code();
var txvalor = opener.$get('<%=request("campo")%>').control;
txvalor2.set_content(markupStr);

¿Hay alguna manera de intercambiar la información capturada en textareas y enviarlos entre determinadas páginas?

1
  • Lo que quieres es mandar información desde la ventana que abre (formulario) a la que se ha abierto (editar). ¿Es así?
    – Alvaro Montoro
    Commented el 7 feb. 2016 a las 20:45

2 respuestas 2

10

Para pasar información de una página (formulario.aspx) a otra ventana que se abre desde la primera (editar.aspx), tienes varias opciones:

1) Pasar la información en el GET

De manera similar a cómo se pasa el nombre del campo, puedes pasar el valor (si no es excesivamente grande) como parte de la URL:

function ZoomEdit2(campo) {
    // obtener el valor del campo (podría hacerse de diferentes maneras)
    var valor = document.getElementById(campo).value;
    // abrir la ventana pasando los valores en la URL
    var nw = window.open("../Plugins/editar.aspx?campo=" + campo + "&valor=" + valor,"FORMATO","resizable=1,width=1100,height=600, scrollbars=1");
    nw.focus();
}

Ventajas de este método:

  • Sencillo
  • Implementación similar a la del atributo campo que ya procesas

Inconvenientes de este método:

  • Hay un límite en el tamaño del valor que puedes pasar
  • Los usuarios pueden ver el valor (no ofrece mucha privacidad ni seguridad)

2) Guardar los valores en el LocalStorage

Otra opción sería guardar el valor en el LocalStorage o el SessionStorage antes de abrir la ventana y luego leer el valor en la nueva ventana cuando se cargue.

function ZoomEdit2(campo) {
    // guardar el valor del campo en el localStorage (podría hacerse de diferentes maneras)
    localStorage.setItem('myCat', document.getElementById(campo).value );
    var nw = window.open("../Plugins/editar.aspx?campo=" + campo + "","FORMATO","resizable=1,width=1100,height=600, scrollbars=1");
    nw.focus();
}

Ventajas de este método:

  • Sencillo y fácil de implementar
  • Puedes guardar más datos de los que podrías pasar a través de la URL

Inconvenientes de este método:

  • No funcionará si el usuario tiene deshabilitadas las cookies
  • No funcionará si los protocolos no coinciden (http o https, pero no los dos)

3) Leer los datos del padre desde la ventana abierta

Como se indica en los comentarios y en otra respuesta, podrías acceder a los valores del padre usando window.parent, así desde la ventana abierta puedes leer el campo que quieras como esto:

var valorEnPadre = window.opener.document.getElementById("ID_DEL_ELEMENTO").value;

Suponiendo que el ID del elemento se ha guardado en el atributo campo entonces sería:

var valorEnPadre = window.opener.document.getElementById(campo).value;

Ventajas de este método:

  • JavaScript puro y duro sin APIs que puedan fallar ni problemas de compatibilidad con navegadores
  • No debería haber problemas de tamaño

Inconvenientes de este método:

  • Requiere que las páginas estén en un servidor (funciona con http o https pero no con file://)
2
  • 1
    en la segunda opción también podría usar sessionStorage en vez de localStorage así solo se guardará los valores durante el tiempo de sesión del navegador y se borrarán cuando el navegador se reinicie. Commented el 20 oct. 2016 a las 13:16
  • Excelente respuesta muchas gracias por el dato Commented el 25 ago. 2017 a las 4:39
2

Para acceder a los datos de la pagina padre puedes usar el window.opener

Window opener Property

Sobre este es que aplicas el selector de jQuery para localizar un control y recuperar su valor, o asignarlo, es tan simple como:

window.opener.$("#idcontrol")

saludos

Para aclarar un poco el uso de window.opener, aquí les dejo un ejemplo de como todo lo que escribimos en una ventana se replicara en la otra (y viceversa).

Ejemplo: https://jsfiddle.net/3vb8643p/2/

  <html>
   <head>
    <title>replicar texto en ventanas</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
     w="";
     $("#edit1").on("keypress",function () {
      w.document.getElementById("edit1").value=$(this).val();
     });
     $("button").on("click", function (){
      w = open("", "_blank", "width=200,height=100");
      w.document.write('<textarea id="edit1" onkeypress="window.opener.$(\'#edit1\').val(this.value)"></textarea>');
     });
    <script>
   </head>
   <body>
    <textarea id="edit1"></textarea>
    <button>abrir otra ventana</button>
   </body>
  </html>
2
  • Gracias por responder a mi pregunta, me quedo duda sobre lo que me comenta al uso "window.opener.$("#idcontrol")" ¿De que forma se implementaría window.opener.$("#idcontrol").value();
    – Jaime Ar
    Commented el 8 ene. 2016 a las 19:40
  • hola, estas usando jquery, usarias el .val() para recuperar o asignar un valor al control seleccionado, window.opener.$("#idcontrol").val(); Commented el 8 ene. 2016 a las 20:56

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.