Question

如果这已被覆盖，我道歉但我找不到任何类似的东西来帮助我。

我基本上想要替换4个iFrame的src，并在数据库内的内容发生变化时重新加载它们。我在这个场景中有2页。第一页是控制器页面，它使用更改来更新数据库。第二页是视图门户，其中包含4个分割排列的iFrame。该页面的目的是监控特定的网站，我希望能够远程更新4个iFrame中的任何一个（比如从iPad上）。

我希望我的查看门户页面（第2页）能够不断检查数据库中的每个条目，看它是否与当前显示的内容不同。类似于：如果db-frame1-url不等于iframe1.src，则iframe1.src等于db-frame1-url。等等...

到目前为止，我已经用PHP构建了我的大部分网站，但是我被告知AJAX JQuery解决方案对我来说可能是最好的。我真的不太确定编程不是我的强项之一。

任何帮助都将非常感谢！

AJAX.PHP

<?php

$con=mysqli_connect("localhost","dbuser","dbpass","dbname");

if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result = mysqli_query($con,"SELECT * FROM frameContent");

$row = mysqli_fetch_array($result);
print_r(json_encode($row));

mysqli_close($con);

?>

OUTPUT.HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="../assets/scripts/jquery-2.0.3.min.js"></script>
<script type="text/JavaScript"> 
setInterval(function(){
    $.ajax({
                url: "ajax.php",
                type: "GET",
                data: "",
                cache: false,
                success: function(resp) {
                    //
                    try {
               json = $.parseJSON(resp);
            } catch (error) {
               json = null;
            }
            //
            if (json) {
                       console.dir(json);
                       $.each(json, function(key,val){
                          if ($("#"+val.name).attr("src") != val.src) {
                            $("#"+val.name).attr("src",val.src);
                          }
                       });
                    }

                }
            });
},6000);
</script>
</head>

<body>
    <iframe id="frame1" src="http://www.google.com"></iframe>
    <iframe id="frame2" src="http://www.darkhorizons.com"></iframe>
    <iframe id="frame3" src="http://www.smh.com.au"></iframe>
    <iframe id="frame4" src="http://www.9to5mac.com"></iframe>
</body>
</html>

Answer 1

数据库更改无法更新页面，因为流在第一个客户端请求内容和服务器响应它。为了实现您的目标，您需要像其他网站一样使用jquery or javascript timer来显示最新的更新内容（例如cricket.yahoo.com的板球比分）。

几秒钟或几分钟后（无论您的更新频率如何），您都可以发送 ajax请求来检查内容更改，如果您发现了内容更改，那么您可以向您请求新的src表。然后，只需使用javascript or jquery.

更改 iframe src

Answer 2

制作php页面ajax.php，输出mysql数据：

print_r($result_of_query);

现在使用jquery ajax来获取此页面的内容。

类似的东西：

setInterval(function(){
    $.ajax({
                url: "ajax.php",
                type: "GET",
                data: "",
                cache: false,
                success: function(resp) {
                    //
                        console.dir(resp);
                        var frame1 = $("#frame1").attr("src");
                        console.dir(frame1);
                        if (frame1 != resp) {
                            $("#frame1").attr("src",resp);
                        }

                }
            });
},6000);

对于多个帧，您可以执行以下操作：

在php中，删除while循环，然后执行此操作：

while($row = mysqli_fetch_assoc($result)){
     $json[] = $row;
}

echo json_encode($json);

另请告诉我有什么输出......

现在在ajax部分：

setInterval(function(){
    $.ajax({
                url: "ajax.php",
                type: "GET",
                data: "",
                cache: false,
                success: function(resp) {
                    //
                    try {
               json = $.parseJSON(resp);
            } catch (error) {
               json = null;
            }
            //
            if (json) {
                       console.dir(json);
                       $.each(json, function(key,val){
                          console.dir(val);
                          console.dir(val.name);
                          console.dir(val.url);
                          if ($("#"+val.name).attr("src") != val.url) {
                            console.dir("if worked!");
                            console.dir($("#"+val.name).attr("src"));
                            $("#"+val.name).attr("src",val.url);
                          }
                       });
                    }

                }
            });
},6000);

更改iFrame SRC并在数据库内容更改时重新加载iFrame

2 个答案: