3

Google Chrome で JavaScript を使用してコントロールを動的に置き換えるという奇妙な問題に直面しています。置き換えられたコントロールは UI に表示されませんが、開発者ツールを使用すると、置き換えられた要素を見つけることができますが、開発者ツールを閉じるまで表示されません。開発者ツールを開いて閉じると、ページを更新するまで問題は再現できなくなります。

これは、要素の outerHTML を置き換えようとしている場合にのみ発生します。

私は最初にjquery's replaceWithAPIを使用しようとしましたが、そのディントヘルプは次のスクリプトに切り替えました-

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 の問題ではないと思います。

どんな助けでも大歓迎です

4

1 に答える 1

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 操作が連続して発生すると失敗することがあります。この変更により、挿入が (1 ミリ秒だけ) 遅れます。違いが生じる可能性があります。何もしない可能性もあります！

于 2012-01-23T21:28:43.187 に答える