0

Hola amigos tengo una consulta,

Tengo la siguiente sentencia html

<iframe class="buscador.html"></iframe>

Esta me carga buscador.html, lo que quiero hacer es que al oprimir un botón de buscador.html me corra un script del index.html(Esta es la pagina padre) el cual modifica algunas propiedades de los elementos de index.html(Propiedades como Display: none;)

Espero que me entiendan y me pueda ayudar.

 <!-- Padre-->
<!DOCTYPE html>
<html>
<head>
	<title>Emisor Prueba</title>
</head>
<body>
	<h1 class="prueba">Claseee</h1>
	<iframe class="buscadoriframe" src="buscador.html""></iframe>
	<script>
		function funcion(){
		     $('.prueba').css({ 'display': 'none' });
		}
	</script>

<script src="control.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>

</body>
</html>

 <!--Hijo-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--Boton que genera la accion en el padre -->
<button id="Cambio">Oprima porfavor</button>
</body>
</html>

4

2 respuestas 2

1

Es posible pero es un dolor de cabeza; ya que tienes problemas de CORS y la mayoría de las veces solo puedes utilizarlo desde mismo dominio.

Encontré este ejemplo que podría ayudarte a entender la idea:

var ifrm = window.frameElement; // reference to iframe element container
var doc = ifrm.ownerDocument; // reference to container's document
var form = doc.forms[0]; // reference to first form in container document

0

Aquí hay algo armado con la API de mensajes.

La idea es tener una referencia a la ventana padre desde la ventana hija y una referencia a la ventana hija desde la ventana padre.

En ambos casos definimos un manejador de mensajes: recibirMensajes(ev), y le enganchamos el evento de escucha al documento correspondiente (padre/hijo) con

window.addEventListener("message", recibirMensajes, false);

Los mensajes se envían de la siguiente manera:

ventanaDestino.postMessage( elMensaje, elOrigen );

elMensaje puede ser casi cualquier cosa que pueda ser serializada con el algoritmo de clonación estructurada.

elOrigen es el domino desde y hacia donde se pueden enviar/recibir los mensajes, para pruebas usar '*', luego poner el dominio que va.

Te incluyo envío de mensajes de texto para ambos lados, implemento sólo el "mensaje para modificar atributos" del padre (desde el hijo), pues la inversa (de padre a hijo) es el mismo mecanismo.

El "mensaje para modificar atributos" es un objeto que lleva una "acción" y que cosas "usar para" o "modificar con" la acción.

En padre.html hay 2 botones con 2 mensajes, ambos de texto (string)

  • enviar un saludo generico (string)
  • enviar el valor del input (string)

En hijo.html hay 3 botones con 3 mensajes mas o menos diferentes:

  • enviar un saludo generico (string)
  • enviar una acción (buscar) junto con el valor del input (object)
  • enviar una acción (cambiar) para modificar el CSS del padre

En padre.html los mensajes se imprimen si son (string) y se procesan si son (object) con un switch para cada acción definida, y un par de foreach para cada una de las cosas de la acción cambiar.

En hijo.html los mensajes se imprimen si son (string) y se responde al mensaje si el texto recibido coincide con "soy tu padre".

Algunos ID's se repiten en padre e hijo, es sólo para demostrar que son dos documentos independientes.

El código está bastante comentado, si hay dudas avisame y lo vemos:

padre.html

<!-- https://es.stackoverflow.com/q/207601/81450 -->
<!-- Padre-->
<!DOCTYPE html>
<html>
<head>
  <title>Emisor y Receptor Prueba</title>
</head>
<body>
  <div style="width:45%; float:left;">
    <h1>Claseee A</h1>
    <h2 class="prueba">Ocultame iFreim!</h2>
    <button id="elBotonSaludar">Saludar Iframe</button>
    <p>
      <input id="elTexto" name="elTexto" type="text" />
      <!--Boton que genera la accion en el hijo -->
      <button id="elBoton">Oprima porfavor (Desde parent)</button>
    </p>
    <br />
    <div id="losMensajes"></div>
  </div>
  <iframe
    id="elIframe" class="buscadoriframe"
    src="hijo.html" width="45%"
    height="320px;" style="float:left;"></iframe>
  <script>

  window.addEventListener("message", recibirMensajes, false);

  function recibirMensajes(ev)
  {
    /*
    // Para seguridad verificar el dominio de origen aqui
    if (ev.origin !== "http://example.org:8080")
    return;
    //*/

    // Mostramos por consola el origen, tipo y mensaje crudo
    console.log(ev.origin, typeof ev.data, ev.data);


    // Definimos como procesar los mensajes

    // si es string lo añadimos como texto al div "losMensajes"
    // intToRGB(hashCode(ev.data.accion)) es usado
    // para colorear segun el texto
    if('string'==typeof ev.data){
      document.getElementById('losMensajes').innerHTML +=
      '<span style="color:#'+intToRGB(hashCode(ev.data))+'">'+
      '('+ev.origin+') dice:</span> ' +
      ev.data + "<br/>";
    }

    // si es object buscamos que sea una accion y que hacer
    if('object'==typeof ev.data){
      // si accion esta definido y cosas no está vacío
      //  lo añadimos como texto al div "losMensajes"
      // intToRGB(hashCode(ev.data.accion)) es usado
      // para colorear segun la accion
      if(ev.data.accion && ev.data.cosas){
        document.getElementById('losMensajes').innerHTML +=
        '<span style="color:#'+intToRGB(hashCode(ev.data.accion))+'">'+
          '('+ev.origin+') dice:</span> ' +
          ev.data.accion + " " +
          JSON.stringify(ev.data.cosas) + "<br/>";


          // aquí según el tipo de accion
          // procesamos las cosas de manera diferente

          switch (ev.data.accion){
            // si es buscar, mentir
            case 'buscar':
            document.getElementById('losMensajes').innerHTML +=
            "[*] Estoy buscando " + ev.data.cosas + "<br/>";
            break;

            // si es cambiar, buscar que cambiar y como
            case 'cambiar':
            document.getElementById('losMensajes').innerHTML +=
            "[*] Estoy cambiando cosas<br/>";

            // recorremos las cosas
            for (var que in ev.data.cosas){

              // hay una clase para agregar?
              if (ev.data.cosas[que].clase){
                // avisamos que hacemos
                document.getElementById('losMensajes').innerHTML +=
                '[**] agregandole la clase "' +
                ev.data.cosas[que].clase + '" a "' + que + '"<br/>';
                // lo hacemos :
                // para cada elemento encontrado agregar la clase
                document.querySelectorAll(que).forEach(function(el){
                  el.classList.add(ev.data.cosas[que].clase)
                })
              }

              // hay estilos para cambiar?
              if (ev.data.cosas[que].estilos){
                // avisamos que hacemos
                document.getElementById('losMensajes').innerHTML +=
                '[**] agregandole estilos "' +
                JSON.stringify(ev.data.cosas[que].estilos) + '" a "' + que + '"<br/>';
                // lo hacemos :
                // para cada elemento encontrado cambiar los estilos
                document.querySelectorAll(que).forEach(function(el){
                  // cambiamos los estilos uno por uno
                  for(var e in ev.data.cosas[que].estilos) {
                    el.style[e] = ev.data.cosas[que].estilos[e];
                  }
                })
              }
            }
            break;

          }
        }
      }
    }

    var soyTuHijo = document.getElementById('elIframe').contentWindow;
    // Saludo Genérico
    document.getElementById('elBotonSaludar').onclick = function(){
      // Para seguridad definir el dominio de origen aqui en vez de '*'
      soyTuHijo.postMessage(
      "Hola Luke!",
      '*'
      );
    }

    // Mensaje personalizado :
    // enviamos el valor del input como string
    document.getElementById('elBoton').onclick = function(){
      var mensajeParaEnviar = document.getElementById('elTexto').value;

      // Para seguridad definir el dominio de origen aqui en vez de '*'
      soyTuHijo.postMessage( mensajeParaEnviar, '*' );
    }


    //** extras **//
    /* https://stackoverflow.com/a/3426956/1423096 */
    function hashCode(str) { // java String#hashCode
      var hash = 0;
      for (var i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
      }
      return hash;
    }

    function intToRGB(i){
      var c = (i & 0x00FFFFFF)
      .toString(16)
      .toUpperCase();

      return "00000".substring(0, 6 - c.length) + c;
    }
  </script>
</body>
</html>

hijo.html

<!-- https://es.stackoverflow.com/q/207601/81450 -->
<!--Hijo-->
<!DOCTYPE html>
<html>
<head>
  <title>Emisor y Receptor Prueba</title>
</head>
<body>
  <h1 class="prueba">Claseee L</h1>
  <button id="elBotonSaludar">Saludar Parent</button>
  <p>
    <input id="laBusqueda" name="laBusqueda" type="text" />
    <!--Boton que genera la accion en el padre -->
    <button id="elBotonBuscar">1. Buscar (Desde iFrame)</button>
    <button id="elOtroBoton">2. Oprima porfavor (Desde iFrame)</button>
  </p>
  <div id="losMensajes"></div>


  <script>

  window.addEventListener("message", recibirMensajes, false);

  function recibirMensajes(ev)
  {
    /*
    // Para seguridad verificar el dominio de origen aqui
    if (ev.origin !== "http://example.org:8080")
    return;
    //*/

    // Mostramos por consola el origen, tipo y mensaje crudo
    console.log(ev.origin, typeof ev.data, ev.data);

    // si es string lo añadimos como texto al div "losMensajes"
    // intToRGB(hashCode(ev.data.accion)) es usado
    // para colorear segun el texto
    if('string'==typeof ev.data){
      document.getElementById('losMensajes').innerHTML +=
        '<span style="color:#'+intToRGB(hashCode(ev.data))+'">'+
        '('+ev.origin+') dice:</span> ' +
        ev.data + "<br/>";
    }


    // Definimos como procesar los mensajes

    // si es string y es "soy tu padre", responder "Noooo"
    // usamos el origen del evento como destinatario

    if(
      'string' == typeof ev.data &&
      'soy tu padre' == ev.data.toLowerCase()
    ){
      event.source.postMessage(
      "Nooooo",
      event.origin
      );
    }
  }

  // definimos destinatario
  var soyTuPadre = window.parent;

  // Saludo Genérico
  document.getElementById('elBotonSaludar').onclick = function(){
    soyTuPadre.postMessage("Hola Ancestro!", '*');
  }

  // Mensaje personalizado :
  // enviamos un objeto con instruccion de "buscar" y el texto a buscar
  document.getElementById('elBotonBuscar').onclick = function(){
    var mensajeParaEnviar = {
      accion : 'buscar',
      cosas  : document.getElementById('laBusqueda').value,
    }
    // Para seguridad definir el dominio de origen aqui en vez de '*'
    soyTuPadre.postMessage( mensajeParaEnviar, '*' );
  }

  // Mensaje personalizado :
  // enviamos un objeto con instruccion de "cambiar" y las cosas
  document.getElementById('elOtroBoton').onclick = function(){
    var mensajeParaEnviar = {
      accion : 'cambiar',
      cosas  : {
        'h1' : {
          clase : 'cambiado',
          estilos : {color : '#f00'},
        },
        'h2' : {
          clase : 'cambiado',
          estilos : {display : 'none'},
        },
        'div#losMensajes' : {
          clase : 'otraclase',
          estilos : {
            border : '1px dashed red',
            borderRadius : '10px',
            padding : '5px',
            margin : '5px'
          },
        }
      },
    }
    // Para seguridad definir el dominio de origen aqui en vez de '*'
    soyTuPadre.postMessage( mensajeParaEnviar, '*' );
  }


  //** extras **//
  /* https://stackoverflow.com/a/3426956/1423096 */
  function hashCode(str) { // java String#hashCode
      var hash = 0;
      for (var i = 0; i < str.length; i++) {
         hash = str.charCodeAt(i) + ((hash << 5) - hash);
      }
      return hash;
  }

  function intToRGB(i){
      var c = (i & 0x00FFFFFF)
          .toString(16)
          .toUpperCase();

      return "00000".substring(0, 6 - c.length) + c;
  }
  </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.