动态创建iframe后，没有明显的原因消失 [英] iframe disappears for no apparent reason after dynamically creating it

问题描述

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

第一次打开我的Chrome扩展并进行搜索时，iframe可以很好地工作。第二次打开我的Chrome扩展并搜索iframe消失（请参阅GIF）。

正如你所看到的，iframe突然消失没有明显的原因，如果我右键单击并进入 inspect element 并编辑最相关的项目，那么所有iframe突然重新出现。

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

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

pre > $（'＃searchBox'）。autocomplete（{
lookup：footballers，
lookupLimit：5，
minChars：3，
onSelect：function建议）{
$（＃searchBox）。blur（）;
$（'。fullcard'）。css（'display'，'block'）;
$（'。 （< / i>>< iframe src =https://www.example.com/ '>< / iframe>'）;
}，
lookupFilter：_autocompleteLookup，
formatResult：_autocompleteFormatResult，
}）;


有什么想法/想法？高度赞赏它。

解决方案

引用 John Winkelman的帖子：

这是一个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）; 
  }）; 
    

  这种情况最近发生在>已修复。
  

This is quite difficult to explain, but I've never experienced something like this before. I've also created a GIF to display what the issue looks like.

The first time I open my chrome extension and make a search the iframe works perfectly fine. The second time I open my chrome extension and make a search the iframe disappears (see GIF).

As you can see the iframe suddenly disappears for no apparent reason, and if I right click and go into inspect element and edit even the most unrelated item then all of a sudden the iframe reappears.

Is there a simple solution I can try? As I said when I toggle any piece of code in the inspect element view in chrome it reappears.

Here is the code for searching: (I'm using jquery Autocomplete for the search)

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

Any thoughts/ideas? Highly appreciate it.

解决方案

Quoting 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 [...]

• Fix 1:

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

• Fix 2 in case the element isn't repainted when scrolling the page:

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

  This case was recently fixed in Chrome/Chromium.

这篇关于动态创建iframe后，没有明显的原因消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！