Fatal编程技术网
  • javascript/
  • 如何在iFrame之间同步javascript？

如何在iFrame之间同步javascript？

javascript android jquery html iframe

如何在iFrame之间同步javascript？,javascript,android,jquery,html,iframe,Javascript,Android,Jquery,Html,Iframe,我正在尝试在使用iFrame的服务器上同步导航。当页面加载时，我在表格图表上加载两个iframe，在第二个iframe（下面的代码）上加载一组图像，一个接一个地加载 在第一个iframe上，表格向左移动td乘以td。我正在使用以下代码： <script type="text/javascript"> document.addEventListener('touchstart', handleTouchStart, false); document.addEventLi

我正在尝试在使用iFrame的服务器上同步导航。当页面加载时，我在表格图表上加载两个iframe，在第二个iframe（下面的代码）上加载一组图像，一个接一个地加载

在第一个iframe上，表格向左移动td乘以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()">


文档。addEventListener（'touchstart'，HandletTouchStart，false）；
文件。addEventListener（'touchmove'，handleTouchMove，false）；
文件。添加的监听器（'touchend'，handleTouchEnd，false）；
var xDown=null；
var yDown=null；
函数handleTouchStart（evt）{
xDown=evt.touchs[0].clientX；
yDown=evt.touchs[0].clientY；
};                                                
功能手柄移动（evt）{
如果（！xDown | |！yDown）{
返回；
}
var xUp=evt.touch[0].clientX；
var yUp=evt.touch[0].clientY；
var xDiff=xDown-xUp；
var yDiff=yDown-yUp；
if（Math.abs（xDiff）>Math.abs（yDiff））{
如果（xDiff>0）{
//左击
animateRight（）；
}否则{
//右击
animateLeft（）；
返回；
}                       
}否则{
如果（yDiff>0）{
//刷卡
}否则{
//下击
}                                                                 
}
/*重置值*/
xDown=null；
yDown=null；
}
函数animateLeft（）{
变量位置=$（“表”）.position（）；
$（“table”）.animate（{left:position.left-30}，400）；
}
函数animateRight（）{
变量位置=$（“表”）.position（）；
$（“table”）.animate（{left:position.left+30}，400）；
}
函数startTimer（）{
设置间隔（animateLeft，1000）；
}
函数stopTimer（）{
返回；
}
在第二个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>


函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
document.getElementById（“img”）.src=images[x]；
}
函数displayPreviousImage（）{
x=（x

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