JavaScript 函数 - 更改 DIV 中的内容

Question

我有一个问题。我有这个功能：

    function isDone()
{ 
    if(isDone){
    $("#loadingStatus").html("NOT DONE...");
    }else{
    $("#loadingStatus").html("#isDone");    
    }
}

上面的代码不起作用。上面的代码检查 iFrame 中的内容是否已完成加载。

我想要的是有一个 div 表示如果未加载“未完成...”，但如果已加载，则将另一个 DIV 输出到 #loadingStatus div 中。

更新：

这是我的 100% 代码。

<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);

?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>

<script type="text/javascript">
function isDone()
{ 
    if(isDone){
    $("#loadingStatus").html("Waiting for your advertisements to load...");
    }else{
    $("#loadingStatus").html($("#isDone").html());  
    }


}
</script>
</head>

<div style="height:10%">
    <table style="border:black;">
        <tr>
            <td><img src="../dream/images/logo.png"></td>
            <td><div id="loadingStatus"></div></td>
            <td>3</td>
        </tr>
    </table>

    <div id="isDone" style="display:none">

    </div>



</div>



<iframe onload="isDone()" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>

Answer 1

您可能正在寻找：

$("#loadingStatus").html($("#isDone").html());

编辑：在您的代码中，isDone是一个函数，而不是一个变量。据我了解，你必须做类似的事情：

$(document).ready(function() {
    $("#loadingStatus").text("Waiting for your advertisements to load...");
});

function isDone()
{ 
    $("#loadingStatus").html($("#isDone").html());  
}

Answer 2

由于在加载 iFrame 之前不会调用该函数，因此不会出现未加载消息。

您需要在 isDone div 中有一些默认文本。

Answer 3

http://jsfiddle.net/sMGTU/

<?php
    $key = $_GET['key'];
    $s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
    or die(mysql_error());
    $r=mysql_fetch_assoc($s);
?>

<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
var iFrameLoaded=false;

function checkDone(iFrameLoaded)
{
    iFrameLoaded
       ? $("#loadingStatus").html("Finished Loading")
       : $("#loadingStatus").html("Waiting for your advertisements to load...");
}

</script>
</head>

<div style="height:10%">
    <table style="border:black;">
        <tr>
            <td><img src="../dream/images/logo.png"></td>
            <td><div id="loadingStatus"></div></td>
            <td>3</td>
        </tr>
    </table>
    <div id="isDone" style="display:none"></div>
</div>

<iframe onload="checkDone(true);"
        src="<?php echo $r['url']; ?>"
        width="100%" height="90%"
        scrolling="auto"
        frameborder="0">
   <p>Your browser does not support iframes.</p>
</iframe>

Answer 4

好吧，NOTDONE 永远不会出现，因为没有可以计算 true 的 isDone 变量。而且这个逻辑似乎是颠倒的。

相反，在加载主文档时设置“未完成”消息，然后在加载 iFrame 文档时将其替换为“完成”消息：

// on document load:
$(function() {
   // set "waiting" message:
   $("#loadingStatus").html("Waiting for your advertisements to load...");

   // on iframe load:
   $('#myIFrame').load(function() {
       // set "done waiting" message:
       $("#loadingStatus").html($("#isDone").html());
   });
});

就是这样；这就是您需要的全部 JavaScript。从 iframe 标记中取出那个可怕的 onLoad 属性，并给它一个 ID：

<iframe id="myIFrame" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>

Answer 5

函数isDone()
{
    if(isDone){

我认为你的问题可能是你有一个名为 isDone 的布尔变量，并且你的函数定义变量名为 isDone，一个这些应该被称为别的东西。

Answer 6

isDone 变量在代码中的哪里设置？你有 iframe 的加载事件处理程序吗？

试试这个

$(function(){

 $("#loadingStatus").html("Waiting for your advertisements to load...");

var isDone = false;
function checkIsDone()
{ 
    if(isDone){
       $("#loadingStatus").html("NOT DONE...");
    }else{
       $("#loadingStatus").html($("#isDone").html());    
    }
}

$("iframeSelector").load(function(){

  isDone = true;

});

checkIsDone();

});

Answer 7

如果你想创建一个新的div：

$("#loadingStatus").append($("<div/>").text("Done."));

如果你想从其他地方移动一个div：

$("#loadingStatus").append($("#isDone"));

如果你想从其他地方复制一个div：

$("#loadingStatus").append($("#isDone").clone());

如果你想移动一个元素的内容：

$("#loadingStatus").append($("#isDone").children());

如果你想复制以下内容一个元素：

$("#loadingStatus").append($("#isDone").children().clone());

更新：

查看代码的其余部分揭示了它的更多问题。由于您没有任何变量来确定内容是否已加载，并且只有在内容加载后才调用该函数，因此只需将更改内容的代码放在函数中即可。将初始消息直接放入元素中。

function isDone() { 
  $("#loadingStatus").append($("#isDone").children().clone());
}