Javascript - JQuery - clearInterval / setInterval - iframe循环不会在点击时停止

Question

我对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，但据我所知，它应该工作，但它确实没有。

感谢您给我的任何帮助，非常感谢。

编辑：

好的，我现在有一个新脚本，主要是基于Elias的工作，但它也不起作用。 我已经把它固定在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>

Answer 1

我认为你的代码因此而无效

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

这可能是获取iFrame的标题，因为您将iframeDoc值保存到iframe的第一个子项head标签，实际上如果您的窗口中有多个iframe iframeDoc将是undefined因为$("iframe")获取文档的所有iframe。

BTW your currentSite value condition is wrong, you asign the same value for both conditions

现在我举个例子：

<iframe id="myFrame" src="http://www.google.com/"></iframe>

和脚本：

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

var sites = [
"site1",
"site2"
];

var myFrame = document.getElementsByTagName('iframe')[0];
var currentSite = myFrame.getAttribute('src');
var timerId;

var myFrameDoc = window.frames[0].document;

$(document).ready(function()
{
    myFrame.setAttribute('src', 'side/html5.html');

    timerId = setInterval(function()
    {
        //WRONGG
        (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
        myFrame.setAttribute('src', sites[currentSite]);
        $(myFrame).off("click").on("click", clearInterval(timerId));
    }, 4000);

    //Won't work because you are trying to get events from an inside of a iframe
    //$(myFrameDoc).on("click", clearInterval(timerId));
    //This may work
    $(myFrameDoc).off("click").on("click", clearInterval(timerId));
});

</script>

当你试图跟踪iframe的事件时，你必须要小心，因为iframe包含一个完全不同的javascript purprouses文档，所以基本上你必须进入新文档，取消绑定你需要使用的事件，并再次绑定它们正如@Elias指出的那样，你的功能。但请注意，你正在不断更改iframe的src，所以如果你真的需要这样做，你必须将解除绑定的代码分开并再次绑定你的clearInterval，并且就此而言， $.on()可能适用于您。

编辑：调用iframe应该这样工作如果iframe的src在同一个域内，具有相同的端口和相同的协议：

var myFrameDoc = window.frames[0].document;

我添加了一个新变量，因为我们要将click事件绑定到unrame的文档而不是iframe，我们使用window.frames集合属性，但是现代浏览器抛出异常并拒绝访问如果您尝试访问到一个框架，你使用相同的端口和相同的协议不在同一个域...

Additionaly使用$.on()和$.off()代替$.bind和$.unbind()是因为第一批是新的，尽管我们在这里不使用它，他们有能力腕表不断要添加的新元素的DOM; 如果此代码仍无法正常工作，则可能对此情况有用。 如果是这种情况，你仍然可以改变这个：

var myFrameDoc = window.frames[0].window;

和这个：

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

这将重新绑定事件处理程序以添加新文档。 没有测试但可以工作。

Answer 2

如果我是你，我会安全地玩。 既然你说你对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）在Callback中，我利用了函数是对象的事实，并创建了一个静态var，它被设置为站点数组的长度（当未定义或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
        });
    });
}

理论上，这应该在加载后将click事件绑定到body

EDIT2

我一直在搞乱，你可以按原样保留你的代码。 只需添加一个功能：

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

并将其添加到您的setInterval函数：

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

一旦加载iFrame内容，这将被触发，并绑定click事件并取消设置计时器，就像你想要的那样

Javascript - JQuery - clearInterval / setInterval - iframe循环不会在点击时停止

问题描述

2 个解决方案

解决方案1
1 2012-04-20 11:25:32

解决方案2
1 2012-04-20 11:48:39

Javascript - JQuery - clearInterval / setInterval - iframe循环不会在点击时停止

问题描述

2 个解决方案

解决方案1 1 2012-04-20 11:25:32

解决方案2 1 2012-04-20 11:48:39

解决方案1
1 2012-04-20 11:25:32

解决方案2
1 2012-04-20 11:48:39