9

我觉得这是一个非常基本的事情，但我似乎无法找到解决方案。我试图在加载 IFRAME 后增加一个值。

代码如下所示：

var x=0;
$(document).ready(function() {
        $('#iframe-2').load(function() {
            var x=x+1;        
        });
        $('#iframe-3').load(function() {
            var x=x+1;    
        });
        $('#iframe-4').load(function() {
            var x=x+1;        
        });
        $('#iframe-5').load(function() {
            var x=x+1;        
        });
    });

我想要做的是提供一些加载的 iframe，当 iframe 完成加载时它们会更新。目前的输出代码是这样的：

<script language="javascript">
document.write(x + " Results");
</script>

提前非常感谢您的帮助！

4

5 回答 5

16

你应该改变

var x = x+1;

到

x = x+1

因为var关键字每次都在你的 every 中创建一个新变量，load所以全局变量x不会更新/增加。

于 2012-07-05T05:57:51.020 回答
6

你在加载回调函数中声明局部变量，所以它不会增加全局变量x，你可以var x在dom准备回调函数内部声明，并在加载回调函数中使用它。

$(document).ready(function() {
    var x = 0;
    $('#iframe-2').load(function() {
        x++;        
    });
    $('#iframe-3').load(function() {
        x++;
    });
    $('#iframe-4').load(function() {
        x++;  
    });
    $('#iframe-5').load(function() {
        x++;  
    });
});

编辑： 在此之后，document.write(x + " Results");仍然无法工作，因为它在 iframe 加载之前执行。您需要异步进行检查。

这是现场演示。

$(document).ready(function() {
    var x = 0;
    $('iframe').load(function() {
        x++;        
    });
    var time_id = setInterval(function() {
      $('#count').text(x);
      if (x === $('iframe').length) {
        clearInterval(time_id);
      }
    }, 200);
});​

的HTML：

<iframe  src="http://www.w3schools.com"></iframe>
<iframe  src="http://www.w3schools.com"></iframe>
<iframe  src="http://www.w3schools.com"></iframe>
<iframe  src="http://www.w3schools.com"></iframe>
<hr>
Loaded iframe count: <span id="count">0<span>
于 2012-07-05T05:58:18.383 回答
3

我终于想出了一个非常简单的解决方案：

var x=0;

    $(document).ready(function() {

        $('#iframe-2').load(function() {
            $("#t2").css("display","inline");
            x++;
            document.getElementById("tabs-1").innerHTML=x + " Results";
        });

        $('#iframe-3').load(function() {
            $("#t3").css("display","inline");
            x++;
            document.getElementById("tabs-1").innerHTML=x + " Results";
        });

        $('#iframe-4').load(function() {
            $("#t4").css("display","inline");
            x++;
            document.getElementById("tabs-1").innerHTML=x + " Results";
        });
        $('#iframe-5').load(function() {
            $("#t5").css("display","inline");
            x++;
            document.getElementById("tabs-1").innerHTML=x + " Results";
        });
    });
于 2012-07-05T23:36:08.147 回答
0

Javascript 具有“函数范围” - 变量仅存在于创建它们的函数中。因此x，当且仅当它们位于不同的函数中时（这里就是这种情况），可以有几个不同的变量命名为 。

变量是使用关键字创建的，var并且在没有关键字的情况下访问。因此，var x = 10;创建一个名为 的变量x，并x = 10;修改一个名为 的现有变量x。

在您的代码中，每个函数都调用var x = 10;. 由于先前定义的定义x是在外部函数中定义的，因此该行有效并创建了一个名为 的新变量x，其作用域为正在调用它的函数。如果您要省略该var语句，解释器将首先查看当前函数的命名空间并没有找到x。然后它将向上移动到全局范围并找到x您已经声明的那个，并使用它。

简而言之，省略var除第 1 行之外的每一行中的单词：

var x = 0;
$(document).ready(function () {
    $('#iframe-2').load(function () {
        x = x + 1;
    });
    $('#iframe-3').load(function () {
        x = x + 1;
    });
    $('#iframe-4').load(function () {
        x = x + 1;
    });
    $('#iframe-5').load(function () {
        x = x + 1;
    });
});
于 2012-07-05T06:08:29.327 回答
0

使用 jQuery 进行上述查询的另一个改变解决方案是在这里...

HTML：

<div id="top"></div>
<iframe  src="http://jquery.com/"></iframe>
<iframe  src="http://jquery.com/"></iframe>
<iframe  src="http://jquery.com/"></iframe>
<iframe  src="http://jquery.com/"></iframe>
<div id="bottom"></div>

查询：

var x = 0;
$(function() {
    $('iframe:eq(0)').load(function() {
        x = x + 1;
        result(x);
    });
    $('iframe:eq(1)').load(function() {
        x = x + 1;
        result(x);
    });
    $('iframe:eq(2)').load(function() {
        x = x + 1;
        result(x);
    });
    $('iframe:eq(3)').load(function() {
        x = x + 1;
        result(x);
    });

});

function result(x) {
    if (x == null || typeof(x) == "undefined") x = 0;
    $("#top").html("<div>Loaded iframe count: " + x + "</div><hr/>");
    $("#bottom").html("<hr/><div>Loaded iframe count: " + x + "</div>");
}

也尝试使用 codebins http://codebins.com/codes/home/4ldqpbk

于 2012-07-05T10:25:08.597 回答