jquery修改iframe的src会闪动

原创

mob649e8155edc4 2023-07-14 08:41:07 ©著作权

文章标签 加载 jQuery javascript 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8155edc4的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 修改 iframe 的 src 会闪动

在使用 jQuery 修改 iframe 的 src 属性时，有时候会出现闪动的情况。这种闪动是因为在修改 src 属性后，iframe 会自动重新加载新的页面，导致页面的内容被刷新，从而产生闪动的效果。本文将详细介绍这个问题的原因，并提供解决方法。

闪动原因

当我们使用 jQuery 或 JavaScript 修改 iframe 的 src 属性时，例如：

$('iframe').attr('src', 'new_url');

上述代码会导致 iframe 内部的页面被重新加载，这意味着浏览器会向服务器重新发送请求，并且重新渲染页面。当新页面加载完成后，会出现闪动的情况，因为页面内容被刷新。

解决方案

要解决这个闪动问题，我们可以通过以下两种方法来处理：

1. 预先创建 iframe

第一种方法是在修改 src 属性之前，预先创建一个隐藏的 iframe。这样，我们在修改 src 属性时，可以先将隐藏的 iframe 的 src 属性设置为新的 URL，然后将其显示出来，最后再将实际使用的 iframe 的 src 属性设置为新的 URL。这样就可以先加载新页面，然后将内容显示到实际使用的 iframe 上，从而避免了闪动。

下面是一个示例代码：

// 创建隐藏的 iframe
var tempIframe = $('<iframe>', { css: { display: 'none' } });

// 设置隐藏的 iframe 的 src 属性为新的 URL
tempIframe.attr('src', 'new_url');

// 将隐藏的 iframe 添加到页面中
$('body').append(tempIframe);

// 将隐藏的 iframe 的内容显示到实际使用的 iframe 上
tempIframe.on('load', function() {
  $('iframe').attr('src', tempIframe.attr('src'));
  
  // 删除隐藏的 iframe
  tempIframe.remove();
});

2. 使用 replaceWith()

第二种方法是使用 jQuery 的 replaceWith() 方法。这个方法可以将一个元素替换为另一个元素，并且保留原始元素的事件处理程序。我们可以先使用一个临时的 div 元素替换 iframe，然后将替换后的 div 元素再替换回原始的 iframe，以此来避免页面的重新加载。

以下是示例代码：

// 创建一个临时的 div 元素
var tempDiv = $('<div>');

// 将 iframe 替换为临时的 div 元素
$('iframe').replaceWith(tempDiv);

// 设置临时的 div 元素的内容为新的 iframe
tempDiv.html('<iframe src="new_url"></iframe>');

// 将临时的 div 元素再替换回原始的 iframe
tempDiv.find('iframe').replaceWith($('iframe'));