How to sync javascript between iframes?

Question

How to sync javascript between iframes?

I am trying to sync navigation on a website that uses iframes. When the page loads, I load two iframes, the first one in the table , and the second iframe (code below) a set of images that are loaded one by one.

In the first iframe, the table is moved left td by td. I am using the below code:

<script type="text/javascript">
document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);
document.addEventListener('touchend', handleTouchEnd, false);

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
    xDown = evt.touches[0].clientX;                                      
    yDown = evt.touches[0].clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
        if ( xDiff > 0 ) {
//      left swipe 
        animateRight();
        } else {
//      right swipe
        animateLeft();
        return;
       }                       
    } else {
        if ( yDiff > 0 ) {
//      swipe up
        } else { 
//      down swipe
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;
}

</script>


   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">       </script>
    <script type="text/javascript">
  function animateLeft() {
  var position = $("table").position();
  $("table").animate({left: position.left - 30}, 400);
   }

  function animateRight() {
  var position = $("table").position();
  $("table").animate({left: position.left + 30}, 400);
   }

   function startTimer() {
              setInterval(animateLeft, 1000);
   }

   function stopTimer() {
    return;
   }

    </script>

    </head>

    <body onload = "startTimer()">

On the second iframe, the images are loaded using the code below, images by image.

      <script type = "text/javascript">
      function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
            document.getElementById("img").src = images[x];
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          document.getElementById("img").src = images[x];
      }

      function startTimer() {
          setInterval(displayNextImage, 1000);
      }

      function stopTimer() {
          x = images.length;
          document.getElementById("img").src = images[x];
      }


      var images = [], x = -1;
      images[0] = "../grib/<?echo $chart?>_<?echo $region_state?>_000.png";
      images[1] = "../grib/<?echo $chart?>_<?echo $region_state?>_003.png";
      images[2] = "../grib/<?echo $chart?>_<?echo $region_state?>_006.png";
      images[3] = "../grib/<?echo $chart?>_<?echo $region_state?>_009.png";
      images[4] = "../grib/<?echo $chart?>_<?echo $region_state?>_012.png";
      images[5] = "../grib/<?echo $chart?>_<?echo $region_state?>_015.png";
      images[6] = "../grib/<?echo $chart?>_<?echo $region_state?>_018.png";
      images[7] = "../grib/<?echo $chart?>_<?echo $region_state?>_021.png";
      images[8] = "../grib/<?echo $chart?>_<?echo $region_state?>_024.png";
      images[9] = "../grib/<?echo $chart?>_<?echo $region_state?>_027.png";
      images[10] = "../grib/<?echo $chart?>_<?echo $region_state?>_030.png";
      images[11] = "../grib/<?echo $chart?>_<?echo $region_state?>_033.png";
      images[12] = "../grib/<?echo $chart?>_<?echo $region_state?>_036.png";
      images[13] = "../grib/<?echo $chart?>_<?echo $region_state?>_039.png";
      images[14] = "../grib/<?echo $chart?>_<?echo $region_state?>_042.png";
      images[15] = "../grib/<?echo $chart?>_<?echo $region_state?>_045.png";
      images[16] = "../grib/<?echo $chart?>_<?echo $region_state?>_048.png";
      images[17] = "../grib/<?echo $chart?>_<?echo $region_state?>_051.png";
      images[18] = "../grib/<?echo $chart?>_<?echo $region_state?>_054.png";
      images[19] = "../grib/<?echo $chart?>_<?echo $region_state?>_057.png";
      images[20] = "../grib/<?echo $chart?>_<?echo $region_state?>_060.png";
      images[21] = "../grib/<?echo $chart?>_<?echo $region_state?>_063.png";
      images[22] = "../grib/<?echo $chart?>_<?echo $region_state?>_066.png";
      images[23] = "../grib/<?echo $chart?>_<?echo $region_state?>_069.png";
      images[24] = "../grib/<?echo $chart?>_<?echo $region_state?>_072.png";
      images[25] = "../grib/<?echo $chart?>_<?echo $region_state?>_075.png";
      images[26] = "../grib/<?echo $chart?>_<?echo $region_state?>_078.png";
      images[27] = "../grib/<?echo $chart?>_<?echo $region_state?>_081.png";
      images[28] = "../grib/<?echo $chart?>_<?echo $region_state?>_084.png";
      images[29] = "../grib/<?echo $chart?>_<?echo $region_state?>_087.png";
      images[30] = "../grib/<?echo $chart?>_<?echo $region_state?>_090.png";
      images[31] = "../grib/<?echo $chart?>_<?echo $region_state?>_093.png";
      images[32] = "../grib/<?echo $chart?>_<?echo $region_state?>_096.png";
      images[33] = "../grib/<?echo $chart?>_<?echo $region_state?>_099.png";
      images[34] = "../grib/<?echo $chart?>_<?echo $region_state?>_102.png";
      images[35] = "../grib/<?echo $chart?>_<?echo $region_state?>_105.png";
      images[36] = "../grib/<?echo $chart?>_<?echo $region_state?>_108.png";
      images[37] = "../grib/<?echo $chart?>_<?echo $region_state?>_111.png";
      images[38] = "../grib/<?echo $chart?>_<?echo $region_state?>_114.png";
      images[39] = "../grib/<?echo $chart?>_<?echo $region_state?>_117.png";
      images[40] = "../grib/<?echo $chart?>_<?echo $region_state?>_120.png";
      images[41] = "../grib/<?echo $chart?>_<?echo $region_state?>_123.png";
      images[42] = "../grib/<?echo $chart?>_<?echo $region_state?>_126.png";
      images[43] = "../grib/<?echo $chart?>_<?echo $region_state?>_129.png";
      images[44] = "../grib/<?echo $chart?>_<?echo $region_state?>_132.png";
      images[45] = "../grib/<?echo $chart?>_<?echo $region_state?>_135.png";
      images[46] = "../grib/<?echo $chart?>_<?echo $region_state?>_138.png";
      images[47] = "../grib/<?echo $chart?>_<?echo $region_state?>_141.png";
      images[48] = "../grib/<?echo $chart?>_<?echo $region_state?>_144.png";
      images[49] = "../grib/<?echo $chart?>_<?echo $region_state?>_147.png";
      images[50] = "../grib/<?echo $chart?>_<?echo $region_state?>_150.png";
      images[51] = "../grib/<?echo $chart?>_<?echo $region_state?>_153.png";
      images[52] = "../grib/<?echo $chart?>_<?echo $region_state?>_156.png";
      images[53] = "../grib/<?echo $chart?>_<?echo $region_state?>_159.png";
      images[54] = "../grib/<?echo $chart?>_<?echo $region_state?>_162.png";
      images[55] = "../grib/<?echo $chart?>_<?echo $region_state?>_165.png";
      images[56] = "../grib/<?echo $chart?>_<?echo $region_state?>_168.png";
      images[57] = "../grib/<?echo $chart?>_<?echo $region_state?>_171.png";
      images[58] = "../grib/<?echo $chart?>_<?echo $region_state?>_174.png";
      images[59] = "../grib/<?echo $chart?>_<?echo $region_state?>_177.png";
      images[60] = "../grib/<?echo $chart?>_<?echo $region_state?>_180.png";
  </script>
<style type="text/css">
.img {
        float:left;
        top:0px;
        left:0px;
        position: absolute;
 }
</style>

   </head>
<body onload = "startTimer()">
       <img id="img" src="../grib/<?echo $chart?>_<?echo   $region_state?>_000.png"/ class="img" width=360>
   </body>
</html>

I would like to keep both animations in sync, so at the same time when the td moves over the first iframe, the image on the second iframe changes for the next one (I have 60 images).

Also I would like to be able to allow users to navigate right and left by scrolling. I am using this script on the second iframe:

<script type="text/javascript">        
document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);
document.addEventListener('touchend', handleTouchEnd, false);

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
    xDown = evt.touches[0].clientX;                                      
    yDown = evt.touches[0].clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
        if ( xDiff > 0 ) {
//      left swipe 
        displayNextImage();
        } else {
//      right swipe
    displayPreviousImage();
    return;
       }                       
    } else {
        if ( yDiff > 0 ) {
//  swipe up
        } else { 
//      down swipe
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;
}

</script>

On the first iframe I was able to start from left to right and right to left when the user swipes on the phone, but it doesn't work as expected, it doesn't move smoothly and I would like the animation to stop when the user has a finger on the screen, and at the end when the table ends on the screen.

On the second iframe, I would like the images to move smoothly when scrolling from right to left, ideally slower when the user moves their finger slightly, and quickly move when the user moves their finger more.

And basically, in order to keep both in sync when the user scrolls, anywhere on the screen, I would like both animations to move accordingly, in sync.

I am assuming that I should put the javascript subwoofer in the parent frame? And let both child iframe pages receive instruction from the same javascript?

I would also like to completely stop the animation with one tap and resume the animation with two taps on the screen. I was unable to stop the animation at all, I added a code return and it didn't work.

+3

javascript jquery android html iframe

Ricardo g Apr 19 17 at 2:41

source to share