如何在iframe之间同步javascript？

时间：2017-04-19 02:41:57

标签： javascript android jquery html iframe

我正在尝试同步使用iframe的web mobile site上的导航。当页面加载时，我会在first one表格图表上，在第二个iframe（下面的代码）上加载两个iframe，这些iframe会逐个加载。

在第一个iframe上，表格向左移动td。我使用以下代码：

<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()">

在第二个iframe上，使用以下代码加载图像，逐个图像。 

      <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>

我想同步这两个动画，所以在td在第一个iframe上移动的同一时间，第二个iframe上的图像会改变为下一个iframe（我有60个图像）。

此外，我希望能够通过滑动使用户能够左右导航。我在第二个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>

在第一个iframe上，当用户在手机上滑动时，我能够从左到右，从右到左开始，但是不能正常工作，它不会平滑移动，我希望动画停止时用户在屏幕上有一个手指，最后，当桌子在屏幕上结束时。

在第二个iframe上，我想让图像从右向左滑动时平滑移动，理想情况下当用户稍微移动手指时移动速度较慢，当用户移动手指时移动速度更快。

主要是，当用户滑动时，在屏幕上的任何位置同步两者，我希望两个动画相应地移动，同步。

我想我应该将滑动javascript放在父框架上？并且两个子iframe页面都接收来自相同javascript的指令吗？

我也希望一键完全停止动画，然后在屏幕上点击两下即可恢复动画。我根本无法停止动画，我在代码上添加了返回，但它没有用。

0 个答案:

没有答案
相关问题
最新问题