页面每秒局部刷新时iframe重复显示问题求助

问题根源 #

你用$('div#refresh').load('index.php', 'update=true')会把整个index.php的内容塞进refresh div里，而你的index.php本身包含了charts的iframe代码，再加上页面里重复的<html>标签导致浏览器解析混乱，所以每次刷新都会多出来一个iframe。

两步简单解决 #

1. 修复页面结构

整个页面只能保留一套<html>、<head>、<body>标签，把多余的标签全部删掉，将charts的div放到<body>内部、refresh div的外面，确保它不在刷新区域范围内。

2. 只加载需要刷新的内容

在PHP里加个判断逻辑：当请求携带update=true参数时，只输出refresh区域内的动态内容，不输出页面其他结构（包括charts部分）。这样load请求就只会获取需要刷新的内容，不会把iframe带进来。

修改后的完整代码 #

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <?php
  // 判断是否为刷新请求，仅首次加载时输出charts区域
  if(!isset($_REQUEST['update'])) {
  ?>
  <div style="text-align: center;" id="charts">
    <form>
      <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/102503/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=40&title=LightRaw&type=line"></iframe>
    </form>
  </div>
  <?php
  }
  ?>

  <!-- 需要刷新的动态区域 -->
  <div class="wrapper" id="refresh">
    <div class="col_3"></div>
    <div class="col_3">
      <?php 
        echo '<h1 style="text-align: center;">Das Ventil ist  '.$row['statusText'].'</h1>';
        echo '<h1 style="text-align: center;">Die Zeit seitdem das Ventil '.$row['statusText'].' ist = '.secondsToTime($elapsed).'</h1>';
      ?>
      <div class="col_3"></div>
      <div class="col_3" style="text-align: center;">
        <form action="index.php" method="post" id="LED" enctype="multipart/form-data">
          <input id="submit_button" type="submit" name="toggle_LED" value="Ventil" />
        </form>
        <br><br>
      </div>
      <div class="col_3"></div>
    </div>
    <div class="col_3"></div>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {
      // 改用setInterval实现每秒循环刷新，setTimeout仅执行一次
      setInterval(function() {
        $('div#refresh').load('index.php', 'update=true');
      }, 1000);
    });
  </script>
</body>
</html>

额外优化说明 #

• 把setTimeout替换成setInterval，确保每秒自动重复刷新，符合你的需求；
• 将JS代码移到body末尾，保证DOM完全加载后再执行逻辑，比仅依赖$(document).ready()更稳定。

内容的提问来源于stack exchange，提问作者Ali Soheili