JavaScript中iframe实现局部刷新的几种方法汇总

简介

iFrame 是HTML中的一种标记，可以使网页中嵌套其他网页。iFrame 的应用非常广泛，可以用于实现局部刷新，即只刷新部分页面的内容，而不用刷新整个页面。这对于提高网站加载速度和用户体验非常有帮助。本文将介绍几种方法来实现iFrame的局部刷新。

方法一：修改iFrame src属性

这是实现iFrame局部刷新最简单的方法。通过修改iFrame的 src 属性，来更新iFrame中的页面内容。这种方法不涉及跨域问题，适用于同域页面的局部刷新。下面是示例代码：

function refreshIframe(){
  var iframe = document.getElementById('myIframe');
  iframe.src = iframe.src;
}

这样就可以通过调用refreshIframe()函数来实现iFrame的局部刷新了。

方法二：利用window.postMessage()方法

这种方法利用了HTML5中的API，可以实现跨域的局部刷新。窗口A可以向窗口B发送消息，窗口B通过监听window事件来获取消息并作出相应操作。利用这个特性，我们可以实现iFrame中页面的局部刷新。

下面是示例代码：

<!DOCTYPE HTML>
<html>  
<head>  
  <meta charset="UTF-8">  
  <title>Parent Window</title>  
  <script type="text/javascript">  
    function load_started() {  
      var frame = document.getElementById('myFrame');  
      var message = {event_type: "load_started", data: "Add your data here"};  
      frame.contentWindow.postMessage(JSON.stringify(message), '*');  
    }
    function load_completed() {  
      var frame = document.getElementById('myFrame');  
      var message = {event_type: "load_completed", data: "Add your data here"};  
      frame.contentWindow.postMessage(JSON.stringify(message), '*');  
    }  
  </script>  
</head>  
<body>  
  <button onclick="load_started()">Start</button>  
  <button onclick="load_completed()">End</button>  
  <iframe id="myFrame" src="http://example.com"></iframe>  
</body>  
</html>

<!DOCTYPE HTML>
<html>  
<head>  
  <meta charset="UTF-8">  
  <title>Child Window Page</title>  
  <style type="text/css">  
    #myDiv {  
      background-color:#ccc;  
      height:100px;  
      width:100%;  
    }  
  </style>  
  <script type="text/javascript">  
    window.addEventListener("message", function(event) {  
      if(event.data.event_type === "load_started") {  
        document.getElementById("myDiv").innerHTML = "Loading...";  
      } else if(event.data.event_type === "load_completed") {  
        document.getElementById("myDiv").innerHTML = "Load Completed";  
      }  
    });  
  </script>  
</head>  
<body>  
  <div id="myDiv"></div>  
</body>  
</html>

当点击“Start”按钮时，窗口A会向iFrame所在窗口（窗口B）发送消息，通知窗口B开始加载。当点击“End”按钮时，窗口A会发送另一个消息，通知窗口B完成了加载。在iFrame所在页面中监听window事件，根据接收到的事件类型更新iFrame中的页面内容。