Question

我有一个这样的iframe：

<iframe id="htmlRender">
</iframe>

我有一个JS代码段来更新iframe的内容：

function renderHtml(htmlString) {
    var iframe = document.getElementById('htmlRender');
    var doc;
    if (iframe.contentDocument) {
        doc = iframe.contentDocument;
    }
    else if (iframe.contentWindow) {
        doc = iframe.contentWindow.document;
    }
    else {
        doc = iframe.document;
    }

    doc.body.innerHTML = '';
    doc.open();
    doc.writeln(htmlString);
    doc.close();
}

当我致电renderHtml时，内容会正确更新。但是，我在Firefox中看到闪烁，这会导致错误的UX。我没有看到其他浏览器出现相同的问题。

如何解决Firefox中的闪烁问题？谢谢！

Answer 1

您不需要执行打开，writeLn和关闭操作。只是做innerHTML事情。

赞：

function renderHtml(htmlString) {
    var iframe = document.getElementById('htmlRender');
    var doc = iframe.contentDocument || 
        iframe.contentWindow.document ||
      iframe.document;

    doc.body.innerHTML = htmlString;
}

renderHtml('<strong>hello</strong');

创建了这个jsfiddle示例：

http://jsfiddle.net/abmkntfq/

Firefox在文档更新时闪烁

1 个答案: