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将是{ {1}}因为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>

当你试图跟踪iframe的事件时，你必须要小心，因为iframe包含一个完全不同的javascript purprouses文档，所以基本上你必须进入新文档，取消绑定你需要使用的事件，并绑定他们再次反对你的功能，正如@Elias指出的那样。但请注意，你经常更改你的iframe的src，所以如果你真的需要这样做，你必须将解除绑定的代码分开并再次绑定你的clearInterval，对于这个问题，<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的src在同一个域内，使用相同的端口并使用相同的协议，则调用iframe应该这样工作：

$.on()

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

另外，使用var myFrameDoc = window.frames[0].document;和$.on()代替$.off()和$.bind是因为第一个是新的，尽管我们在这里没有使用它们，能够不断观察DOM，以便在添加时绑定新元素;如果此代码仍无法正常工作，则可能对此情况有用。如果是这种情况，您仍然可以更改此内容：

$.unbind()

和此：

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

这会将事件处理程序重新绑定到新文档添加项。未经测试但可行。

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）使用回调函数设置间隔，因为它有更好的理由

在回调中，我利用了函数是对象的事实，并创建了一个静态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事件绑定到正文

<强> EDIT2

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

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

并将其添加到setInterval函数：

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

只要加载iFrame内容，就会触发此操作，并绑定点击事件和取消设置计时器，就像您想要的那样

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

2 个答案: