jQuery 修改 iframe 的 src 并重新加载 iframe

在本文中，我们将介绍如何使用 jQuery 修改 iframe 元素的 src 属性，并在修改后重新加载 iframe。

1. 使用 attr() 方法修改 iframe 的 src 属性

要修改 iframe 的 src 属性，可以使用 jQuery 的 attr() 方法。attr() 方法用于获取或设置指定元素的属性值。

首先，我们可以使用选择器选中要修改的 iframe 元素。假设我们有一个 id 为 “my-iframe” 的 iframe 元素，可以使用以下代码选中它：

var iframe = $('#my-iframe');

然后，我们可以使用 attr() 方法修改 iframe 的 src 属性。假设我们要将 iframe 的 src 修改为 “http://www.example.com”，可以使用以下代码：

iframe.attr('src', 'http://www.example.com');

2. 使用 prop() 方法修改 iframe 的 src 属性

除了使用 attr() 方法，还可以使用 prop() 方法来修改 iframe 的 src 属性。prop() 方法用于获取或设置指定元素的属性值。

使用 prop() 方法修改 iframe 的 src 属性与使用 attr() 方法类似。以下是使用 prop() 方法修改 iframe 的 src 属性的示例代码：

iframe.prop('src', 'http://www.example.com');

3. 重新加载修改后的 iframe

在修改完 iframe 的 src 属性后，我们可以使用 JavaScript 的 location.reload() 方法来重新加载 iframe。这将导致浏览器重新加载 iframe 的内容。

为了在 iframe 修改后自动重新加载它，我们可以使用以下代码：

iframe.on('load', function() {
  iframe.get(0).contentWindow.location.reload();
});

在上面的代码中，我们监听了 iframe 的 load 事件，并在事件发生时重新加载 iframe。

4. 完整示例

下面是一个完整的示例，演示了如何使用 jQuery 修改 iframe 的 src 属性并重新加载 iframe。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <iframe id="my-iframe" src="http://www.example.com"></iframe>

  <script>
    (document).ready(function() {
      var iframe =('#my-iframe');
      iframe.attr('src', 'http://www.new-example.com');

      iframe.on('load', function() {
        iframe.get(0).contentWindow.location.reload();
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们首先创建了一个 id 为 “my-iframe” 的 iframe 元素，并将其 src 属性设置为 “http://www.example.com”。然后，使用 jQuery 修改了 iframe 的 src 属性为 “http://www.new-example.com”，并在修改后重新加载了 iframe。

总结

通过使用 jQuery 的 attr() 或 prop() 方法，我们可以轻松地修改 iframe 的 src 属性。然后，通过监听 iframe 的 load 事件，并使用 location.reload() 方法重新加载 iframe，我们可以实现在修改 iframe 的 src 属性后自动重新加载它。以上是使用 jQuery 修改 iframe 的 src 属性并重新加载的简单示例。希望本文对您有所帮助！