2013-12-18 7 views
0

Прошу прощения, если это было покрыто, однако я не смог найти ничего подобного, чтобы помочь мне.Измените iFrame SRC и перезагрузите iFrame при изменении содержимого базы данных

В основном я хочу заменить src из 4 iFrames и перезагрузить их, когда содержимое в базе данных изменится. У меня есть 2 страницы в этом сценарии. Первая страница - это страница контроллера, которая обновляет базу данных с изменениями. Вторая страница - это портал просмотра, который имеет 4 iFrames в квадрантной схеме. Целью страницы является мониторинг определенных сайтов, и я хотел бы иметь возможность обновлять любой из 4 iFrames удаленно (скажем, с iPad).

В настоящее время у меня установлена ​​моя база данных. Моя таблица имеет 3 столбца (id/name/url). Я заполнил таблицу с 4 записями до сих пор:
1 | кадр1 | ht * p: //www.google.com
2 | кадр2 | ht * p: //www.darkhorizons.com
3 | кадр3 | ht * p: //www.smh.com.au
4 | frame4 | ht * p: //www.9to5mac.com

Я хотел бы, чтобы моя страница просмотра портала (Страница2) постоянно проверяла каждую запись в db, чтобы увидеть, отличается ли она от того, что она отображает в данный момент. Что-то по строкам: если 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> 

ответ

0

Make 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($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); 
0

Изменение базы данных не может обновить страницу как в проточных первых клиентских запросов на содержание и ответов сервера, то , Для достижения своей цели вам нужно использовать jquery or javascript timer, как и другие сайты, чтобы показывать последний обновленный контент (например, cricket.yahoo.com для оценки крикета).

Через несколько секунд или минут (независимо от частоты обновления) вы можете отправить ajax-запрос , чтобы проверить изменение содержимого, и если вы его узнаете, вы можете запросить новый src из своих таблиц. Тогда просто изменить IFrame SRC с помощью javascript or jquery.

+0

Спасибо за ответ, однако это именно то, что я сказал, что хотел сделать в своем описании. Я понимаю, что мне нужен скрипт для проверки db и внесения изменений. Можете ли вы предоставить какие-либо другие примеры сценариев, а не cricket.yahoo.com? К сожалению, я не могу потянуть код оттуда. – adroxx

Смежные вопросы