iframe 在动态创建后无故消失

Posted 2023-05-09

【中文标题】iframe 在动态创建后无故消失

【英文标题】：iframe disappears for no apparent reason after dynamically creating it

【发布时间】：2015-10-07 20:43:22

【问题描述】：

这很难解释，但我以前从未经历过这样的事情。我还创建了一个 GIF 来显示问题的样子。

我第一次打开我的 chrome 扩展并进行搜索时，iframe 工作得非常好。第二次打开我的 chrome 扩展并进行搜索时，iframe 消失了（参见 GIF）。

如您所见，iframe 突然无缘无故消失了，如果我右键单击并进入 inspect element 并编辑最不相关的项目，然后 iframe 突然重新出现。

我可以尝试一个简单的解决方案吗？正如我所说，当我在 chrome 中切换 inspect element 视图中的任何代码时，它会重新出现。

这是搜索的代码：（我正在使用 jquery Autocomplete 进行搜索）

$('#searchBox').autocomplete(
lookup: footballers,
lookupLimit: 5,
minChars: 3,
onSelect: function (suggestion) 
    $("#searchBox").blur();     
    $('.fullcard').css('display', 'block');
    $('.fullcard').append('<i id="closeCard" class="material-icons">close</i><iframe src="https://www.example.com/'+suggestion.data+'"></iframe>');
,
lookupFilter: _autocompleteLookup,
formatResult: _autocompleteFormatResult, 
);

有什么想法/想法吗？非常感谢。

【问题讨论】：

您的 iframe 是否有可能意外重新加载（例如在提交表单后）？

这可能是因为您正在加载到另一个页面。

@jfriend00 但这并不能解释为什么它第一次加载，但不是第二次......

可能会，也可能不会（取决于您的代码），但这是一个非常常见的错误，会导致页面闪烁然后重新加载，因此我建议您检查是否发生这种情况。你没有透露足够的情况让我们看看这是否会发生，所以我所能做的就是让你检查一下。如果由于表单提交而导致页面重新加载，可以在 Chrome 调试器的网络选项卡中轻松查看。

@jfriend00 我实际上并没有使用表单，我只是有一个文本框，jquery-autocomplete 负责其余的工作。我还检查了 chrome 调试器，似乎没有发生重新加载。

【参考方案1】：

引用John Winkelman's post:

这是 Webkit 浏览器（Chrome、Safari）的一个已知问题。有时，当更新内联元素或样式时，浏览器不会重绘/重绘屏幕，直到 DOM 中发生块级更改。当页面中有很多事情发生时，这个错误最常发生 [...]

修复 1：

document.getElementById('myElement').style.webkitTransform = 'scale(1)';

修复2，以防滚动页面时不重新绘制元素：

document.addEventListener("scroll", function(event) 
    var style = document.getElementById("name").style;
    style.webkitTransform = style.webkitTransform ? "" : "scale(1)";
);

此案例最近在 Chrome/Chromium 中为 fixed。

【讨论】：

你刚刚用这个答案救了我的命......我已经尝试解决这个问题好几天了。如果您只能看到我对此进行了多少 Google 搜索。直到您到达 Google 搜索的第 5 页以上，您才知道真正的绝望！非常感谢！