Question

我觉得这是一个非常基本的东西，但我似乎无法找到解决方案。我试图在加载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会在iframe完成加载时更新。输出代码目前是这样的：

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

提前感谢任何帮助！

Answer 1

你应该改变

var x=x+1;

到

x=x+1

因为var关键字每次都在load创建一个新变量，所以全局变量x没有得到更新/递增。

Answer 2

在load回调函数中声明局部变量，因此它不会增加全局x，你可以在dom ready回调函数中声明var x，并在加载回调函数中使用它。 / p>

$(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之前执行。您需要异步检查。

以下是 the live demo 。

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

Answer 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";
        });
    });

Answer 4

Javascript具有“函数范围” - 变量仅存在于它们创建的函数中。因此，当且仅当它们处于不同的函数中时，才有可能有几个名为x的不同变量（这是案例）。

变量是使用var关键字创建的，无需关键字即可访问。因此，var x = 10;创建名为x的变量，x = 10;修改名为x的现有变量。

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

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

var

Answer 5

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

JQuery的：

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>");
}

尝试使用代码字http://codebins.com/codes/home/4ldqpbk

使用jquery增加变量

5 个答案: