2

I am trying to have an iframe on my site that will load a site from the internet *and* automatically perform a scroll down scroll (animate).

It works if I have as a src a simple page (local) with some content but when i change the src to and external source, it does not longer works.

the 'ticks' variable don't get incremented, loos like it loses the scope, what is going on?

  • "DOES NOT WORK: iframe id="frame" src="http://www.thePage.com" scrolling="yes" /"
  • WORKS: iframe height="100%" id="frame" src="./mypage2.html" scrolling="yes"/*

Here is an example:

<html>
     <head>
        <title></title>
      </head>

    <body style="margin:0px;padding:0px;overflow:hidden">

    <iframe height="100%" id="frame" src="http://plugins.jquery.com" scrolling="yes"  ></iframe>

</body>

    <script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">

   var ticks = 1;

    $(document).ready(function() {
        self.setInterval("scrolldown1("+(ticks+1)+")",5000);
    });


    function scrolldown1(tick) {
        alert("scrolldown" +  ticks);
        $("#frame").contents().scrollTop(ticks*100);
        ticks = ticks + 2;
    }


    </script>

</html>

Thanks for your time, I cannot understand why it does not scroll when I src and external site!

Lou_Ds
  • 531
  • 2
  • 11
  • 23

1 Answers1

2

Because of the same-origin policy, it's not really possible.

One way to solve it is to load the entire third party website in a very long iframe, put that iframe in a div with overflow: auto and then scroll the div instead.

Magnus Engdal
  • 5,446
  • 3
  • 31
  • 50
  • Thanks for your reply. Can you please post a simple example? I could not get it working with the iframe on the DIV. Thanks again – Lou_Ds Dec 18 '13 at 20:28
  • I found a similar question with this solution as the accepted answer. Have a look: http://stackoverflow.com/questions/1656665/using-javascript-to-scroll-iframe-up-and-down – Magnus Engdal Dec 18 '13 at 21:16