Question

我在使用Google Chrome中的javascript动态替换控件时遇到了一个奇怪的问题。替换的控件不会显示在UI中，但是当我使用开发人员工具时，我能够找到替换的元素，但在我关闭开发人员工具之前它不会显示。一旦我打开和关闭开发人员工具，问题就不再可复制，直到我刷新页面。

仅在我尝试替换元素的outerHTML的情况下才会发生这种情况。

我首先尝试使用jquery's replaceWith api，该dint帮助所以我切换到以下脚本 -

function chromeOuterHTML(oldElem, outerhtml)
{
var el = document.createElement('div');
el.innerHTML = outerhtml;
var parentNode = oldElem.parentNode;
var range = document.createRange();
        range.selectNodeContents(el);
        var documentFragment = range.extractContents();
        parentNode.insertBefore(documentFragment, oldElem);
        parentNode.removeChild(oldElem);
}

我不认为这是我的javascript的问题，因为问题是特定于chrome的，并且仅在某些情况下也会发生。

非常感谢任何帮助

Answer 1

更多的诊断工具而不是解决方案，但您是否尝试过延迟insertBefore？

function chromeOuterHTML(oldElem, outerhtml)
{
var el = document.createElement('div');
el.innerHTML = outerhtml;
var parentNode = oldElem.parentNode;
var range = document.createRange();
        range.selectNodeContents(el);
        var documentFragment = range.extractContents();
            setTimeout(function () {    
                parentNode.insertBefore(documentFragment, oldElem);
                parentNode.removeChild(oldElem);
    }, 1);
}

在某些情况下（我还不完全了解），如果DOM操作连续过快发生，则可能会失败。这种修改将延迟（仅1ms）插入 - 它可能会产生影响。它也有可能什么都不做！

jquery replaceWith没有在谷歌Chrome上工作

1 个答案: