iframe 在动态创建后无缘无故消失

Question

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

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

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

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

这是搜索代码：（我使用 jquery 自动完成搜索）

$('#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, 
});

有thoughts/ideas吗？非常感谢。

Answer 1

引用 John Winkelman's post:

This is a Known Issue for Webkit browsers (Chrome, Safari). Sometimes, when updating an inline element or style, the browser does not redraw/repaint the screen until a block-level change happens in the DOM. This bug most often occurs when there is a lot going on in the page [...]

修复 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)";
});

这个案例最近 fixed Chrome/Chromium。

iframe 在动态创建后无缘无故消失

iframe disappears for no apparent reason after dynamically creating it

javascript

iframe

jquery

jquery-autocomplete

google-chrome-extension