1

Buenas, en mi página tengo un iframe y encima de este 3 botones, uno para hacer Scroll Arriba, otro Scroll Abajo y otro para pausar el Scroll.

 <html>
      <head>
       <script>

        function scrollAbajo(){
            var myIframe=document.getElementById('iframe');
            myIframe.contentWindow.scrollTo(0,500);
        }
    </script>
</head>
<body>
    <input type="button" name="subir" value="Subir"/>
    <input type="button" name="bajar" value="Bajar" onclick="scrollAbajo()"/>
    <input type="button" name="pausa" value="Pausa"/>
    <br>
    <iframe src="http://www.w3schools.com" id="iframe">
    </iframe>
</body>

Este es mi código, y tengo que decir que es la primera vez que trabajo con cosas así y la verdad es que no logro hacer que funcione. Hasta ahora he hecho la función para hacer que baje, y luego con esa, seguir con el resto, pero nada de nada.

2 respuestas 2

3

El problema con esa solución es que, por restricciones de seguridad del explorador, sólo te funcionaría en frames que apunten al mismo dominio. En caso contrario te arrojará un error como este:

VM307:6 Uncaught DOMException: Blocked a frame with origin "http://null.jsbin.com" from accessing a cross-origin frame.
    at scrollAbajo (<anonymous>:6:35)
    at HTMLInputElement.onclick (http://null.jsbin.com/runner:1:659)scrollAbajo @ VM307:6onclick @ VM218 runner:1

Otra solución es que insertes el iframe dentro de un div y controles el scroll del div:

#div_iframe {
  border-style: inset;
  border-color: grey;
  overflow: scroll;
  height: 500px;
  width: 90%
}

#frame {
  width: 100%;
  height: 1000%;
}
 <html>
      <head>
       <script>

        function scrollAbajo(){
            document.getElementById('div_iframe').scrollTop = 500
        }
        function scrollArriba(){
            document.getElementById('div_iframe').scrollTop = 0
        }
    </script>
</head>
<body>
  <input type="button" name="subir" value="Subir" onclick="scrollArriba()"/>
  <input type="button" name="bajar" value="Bajar" onclick="scrollAbajo()"/>
  <input type="button" name="pausa" value="Pausa"/>
  <div id='div_iframe'>
    <iframe id='frame' src='http://www.w3schools.com' />
  </div>
</body>

0

<!doctype html>
 <html>
   <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Título de la página</title>
      <style type="text/css">
          #divIframe {
          border-style: inset;
          border-color: grey;
          overflow: scroll;
          height: 400px;
          width: 100%
          }
          #iframe {
              width: 100%;
              height: 1000%;
          }
      </style>
      <script type="text/javascript">
    
          var activar;
          
          function arriba1(){ document.getElementById("divIframe").scrollTop -= 2; }
          function arriba() {
              pausa();
            activar = setInterval(arriba1, 20);
          }
          
          function abajo1(){ document.getElementById("divIframe").scrollTop += 2; }
          function abajo() {
              pausa();
              activar = setInterval(abajo1, 20); 
          }
          
          function pausa(){
              clearInterval(activar);
          }
          /*NATANAEL BENIAMIN CIOARBA*/
      </script>
   </head>
   <body>
       <center>
            <button onclick="arriba()">Arriba</button>
            <button onclick="abajo()">Abajo</button>
            <button onclick="pausa()">Pausa</button>
       </center>
       <br><br><br><br>
       <div id="divIframe">  
           <iframe id="iframe" src="http://www.romanianvoice.com/poezii/poezii/penes.php">
           </iframe>
        </div>
    </body>
</html>

1
  • 1
    Recuerda una respuesta. Ok explicación es más de provecho y mejor recibida que un fragmento de código sin explicaciones
    – BetaM
    el 23 mar. 2020 a las 14:20

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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