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
    – user128299
    Commented el 23 mar. 2020 a las 14:20

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.