Javascript-JQuery-clearInterval/setInterval-iframe-cycle-won'；我一点也不停_Javascript_Jquery_Setinterval_Clearinterval

Javascript-JQuery-clearInterval/setInterval-iframe-cycle-won'；我一点也不停

javascript jquery

Javascript-JQuery-clearInterval/setInterval-iframe-cycle-won'；我一点也不停,javascript,jquery,setinterval,clearinterval,Javascript,Jquery,Setinterval,Clearinterval,一般来说，我对Javascript比较陌生，我从这个网站上找到的东西拼凑了一个小脚本，试图得到一个小iframe来循环浏览一组链接，它做得非常出色。但是，我也希望当用户单击iframe或其任何内容时，它停止循环这是我到目前为止的代码。HTML页面上只有一个iframe <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></sc

一般来说，我对Javascript比较陌生，我从这个网站上找到的东西拼凑了一个小脚本，试图得到一个小iframe来循环浏览一组链接，它做得非常出色。但是，我也希望当用户单击iframe或其任何内容时，它停止循环

这是我到目前为止的代码。HTML页面上只有一个iframe

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
<!--
var sites = [
  "side/html5.html",
  "side/silverlight.html",
  "side/wordpress.html",
  "side/mysql.html",
  "side/php.html",
  "side/css3.html"
];
var currentSite = sites.length;
var timerId;
var iframeDoc = $("iframe").contents().get(0);

$(document).ready(function ()
{
  var $iframe = $("iframe").attr("src","side/html5.html");

  timerId = setInterval(function()
  {
    (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
    $iframe.attr("src",sites[currentSite]);
  }, 4000);

  $(iframeDoc).bind('click', function()
  {
    clearInterval(timerId);
  });

});
//-->
</script>
</head>

<body>

<sidebar>
<iframe name="sideframe" src="side/html5.html"></iframe>
</sidebar> ..etc..

等

请帮助我，我正在尽可能快地学习Javascript，但就我所知，它应该可以工作，但实际上不行

谢谢你能给我的任何帮助，真的很感激

编辑：

好吧，我现在有了一个新剧本，大部分是根据埃利亚斯的作品改编的，但也不管用。我已经在Firebug中锁定了它，它说timerCallback.currentSite值正在正确更新，尽管我找不到$iframe的src值来显式检查它。据我所知，它正确地更新了变量，只是没有正确地更新iframe。我是否在此代码中正确调用/设置iframe？另外，jquery库中的链接是否足以满足我的需要？我有点失去了所有这些图书馆的链接

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" charset="utf-8">

<!--

var sites = 
[
  "side/html5.html",
  "side/silverlight.html",
  "side/wordpress.html",
  "side/mysql.html",
  "side/php.html",
  "side/css3.html"
];

var $iframe = $("iframe").attr("src","side/html5.html");

function timerCallback()
{
    timerCallback.currentSite = (timerCallback.currentSite ? timerCallback.currentSite : sites.length) -1;
    $iframe.attr("src",sites[timerCallback.currentSite]);

    $($('iframe').contents().get('body')).ready(function()
    {
        $(this).unbind('click').bind('click',function()
        {
            var theWindow = (window.location !== window.parent.location ? window.parent : window);
            theWindow.clearInterval(theWindow.timerId);
        });
    });

}

var timerId = setInterval(timerCallback, 4000);

//-->

</script>

我认为您的代码无法正常工作就是因为这个原因

var iframeDoc = $("iframe").contents().get(0);

这可能是获取iFrame的标题，因为您正在将iframeDoc值保存到iFrame的第一个子项

head

标记，实际上，如果窗口中有多个iFrame，iframeDoc将是

未定义的，因为$（“iFrame”）
获取文档的所有iFrame
顺便说一句，您当前的站点值条件是错误的，您为这两个条件指定了相同的值

现在我给大家举个例子：
<iframe id="myFrame" src="http://www.google.com/"></iframe>

我添加了一个新变量，因为我们希望将click事件绑定到iframe的文档，而不是iframe，我们使用window.frames集合属性，但是，如果您试图访问一个帧，而您不在使用相同端口和相同协议的同一域上，那么现代浏览器会抛出异常并拒绝访问
另外，使用$.on（）
和$.off（）
而不是$.bind
和$.unbind（）
是因为第一个是新的，尽管我们在这里不使用它，但是如果添加新的元素，它们能够不断地监视DOM以进行绑定；如果这段代码仍然不起作用，这对这种情况可能很有用。如果是这种情况，您仍然可以更改：
var myFrameDoc = window.frames[0].window;

这是：
$(myFrameDoc).off("click", "document").on("click", "document", clearInterval(timerId));

这会将事件处理程序重新绑定到新文档。没有经过测试，但可以工作。
如果我是你，我会小心行事。既然你说你对JS相当陌生，那么它可能会提供很多信息
function timerCallback()
{
    timerCallback.currentSite = (timerCallback.currentSite ? timerCallback.currentSite : sites.length) -1;
    $iframe.attr("src",sites[timerCallback.currentSite]);
}
var timerId = setInterval(timerCallback, 4000);
$($('iframe').contents().get('body')).unbind('click').bind('click', function()
{
    var theWindow = (window.location !== window.parent.location ? window.parent : window);
    theWindow.clearInterval(theWindow.timerId);
});

现在我必须承认，这段代码根本没有经过测试。虽然我认为它提供了一些东西让你走上正轨：
1） 间隔是使用回调函数设置的，因为有很多原因它会更好
1b）在该回调中，我利用了函数是对象这一事实，创建了一个静态变量，该变量设置为sites数组的长度（未定义时或0），在这两种情况下，1都是减法的
2） jQuery的，get（）
方法返回一个DOM元素，而不是jQuery对象，这就是为什么我将它包装在$（）
，一个新的jQ obj中，为您提供所需的方法
3） 由于您在iFrame中操作dom，因此最好解除要绑定的事件的绑定
4） 在iFrame内部，您没有直接访问父窗口的权限，在父窗口中，您的间隔为
你可能想了解一下如何处理iFrame，因为它们有时可能有点冒牌货
编辑：
David Diez是对的，最简单的方法是将绑定合并到超时函数中：
function timerCallback()
{
    timerCallback.currentSide = ...//uncanged
    //add this:
    $($('iframe').contents().get('body')).ready(function()
    {
        $(this).unbind('click').bind('click',function()
        {
            //this needn't change
        });
    });
}

function unsetInterval()
{
    window.clearInterval(window.timerId);
}

$('#idOfIframe').load(function()
{
    var parentWindow = window.parent;
    $('body').on('click',function()
    {
        parentWindow.clearInterval();
    });
});

理论上，这应该会在加载后将单击事件绑定到主体
Edit2
我一直在胡闹，你可以保留你的代码。只需添加一个函数：
function timerCallback()
{
    timerCallback.currentSide = ...//uncanged
    //add this:
    $($('iframe').contents().get('body')).ready(function()
    {
        $(this).unbind('click').bind('click',function()
        {
            //this needn't change
        });
    });
}

function unsetInterval()
{
    window.clearInterval(window.timerId);
}

$('#idOfIframe').load(function()
{
    var parentWindow = window.parent;
    $('body').on('click',function()
    {
        parentWindow.clearInterval();
    });
});

并将其添加到setInterval函数中：
function timerCallback()
{
    timerCallback.currentSide = ...//uncanged
    //add this:
    $($('iframe').contents().get('body')).ready(function()
    {
        $(this).unbind('click').bind('click',function()
        {
            //this needn't change
        });
    });
}

function unsetInterval()
{
    window.clearInterval(window.timerId);
}

$('#idOfIframe').load(function()
{
    var parentWindow = window.parent;
    $('body').on('click',function()
    {
        parentWindow.clearInterval();
    });
});

当用户将鼠标悬停在iFrame上时，$（'iFrame'）
位将不起作用，它将返回一个1（或更多，取决于页面上iFrame的数量）的数组。对不起，这是伪代码。尝试使用$（'iframe'）[0]
或为iframe提供一个id，并使用id选择器$（'iFrameId'）
我尝试了您的建议，并且$（'iframe'）
得到了$（'iframe'）[0]未定义，这是一个错误（对于其他人也是如此）。全文：var$iframe=$（'iframe'）[0].attr（“src”，“side/html5.html”）-我将把它放在网上，让你看到它的作用。编辑：参见$（'iframe'）.attr（'src'）
在控制台中对我起作用，试试看（因为只有一个iFrame，因为jQuery包装器是数组的一种，所以会返回一个标准的jQuery对象）-我的错误是$（'iFrame'）.contents（）.get（'body'）。取消绑定（'click'））.bind
是一个非常好的技巧，但请注意，这不会起作用，因为他的代码会不断更改iframe中的DOM，因此基本上他无法跟踪iframe中的事件！如果功能被分离，则可以使用$.on（）
而不是$.bind（）
@DavidDiez:添加了一个理论上的解决方法，未经测试，但基本思想是绑定就绪
事件，它应该与on
具有相同的效果我已经尝试了你的两种解决方案，David和Elias，但不幸的是，它似乎不再循环浏览页面，这使得测试停止功能有点困难。我可以看出你是从哪里来的面对困难的