在前端开发中，我们经常需要在网页中嵌入一个或多个 iframe，以便在页面中展示其他网站的内容或者将当前网页的部分内容独立出来。然而，在某些情况下，我们可能需要通过 JavaScript 动态地刷新 iframe 中的内容，例如当 iframe 中的内容需要定时更新时。
本文将介绍如何使用 JavaScript 刷新 iframe，并给出详细的代码示例和指导意义。
1. 通过设置 iframe 的 src 属性进行刷新
最简单的方法是直接设置 iframe 的 src 属性为原来的值，即可实现刷新。代码如下：
const iframe = document.getElementById('my-iframe');
iframe.src = iframe.src;这样做的原理是，在设置 src 属性后，浏览器会自动重新加载新的页面内容。但是需要注意的是，如果 iframe 中的内容来自不同的域名，则会受到同源策略的限制，无法进行刷新操作。
2. 通过 JavaScript 调用 iframe 中的函数进行刷新
如果当前网页和嵌入的 iframe 来自同一个域名，则可以通过 JavaScript 调用 iframe 中的函数来实现刷新。代码如下：
<!-- 定义 iframe 中的函数 -->
<iframe id="my-iframe" src="https://example.com"></iframe>
<script>
function refresh() {
// 刷新 iframe 中的内容
}
</script>
<!-- 调用 iframe 中的函数进行刷新 -->
<button onclick="document.getElementById('my-iframe').contentWindow.refresh()">刷新</button>这里，我们在 iframe 的页面中定义了一个名为 refresh 的函数，在主页面中通过调用 contentWindow 对象来访问这个函数并实现刷新操作。
需要注意的是，这种方法只适用于当前网页和嵌入的 iframe 来自相同域名的情况。如果不同域名之间想要进行通信，需要使用其他相应的跨域解决方案。
3. 通过 JavaScript 操作 iframe 的 DOM 进行刷新
除了以上两种方法，还可以通过 JavaScript 操作 iframe 的 DOM 元素来实现刷新。具体来说，我们可以通过获取 iframe 的 body 元素，然后将其 innerHTML 属性设置为空字符串，最后再将其设置回原来的值即可。代码如下：
const iframe = document.getElementById('my-iframe');
iframe.contentDocument.body.innerHTML = '';
iframe.contentDocument.body.innerHTML = originalHTML;这种方法的好处是可以保留原有的 iframe 内容，只重新加载其中的部分内容。但是需要注意的是，在某些情况下可能会存在跨域访问的问题。
总结
本文介绍了三种常见的方法来实现 JavaScript 刷新 iframe 的操作。对于不同的需求，可以根据实际情况选择合适的方法。需要注意的是，在进行跨域访问时，需要注意同源策略的限制，并使用相应的解决方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11371