Firefox在文档更新时闪烁

Question

I have an iframe like this:

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

And I have a JS snippet to update the iframe's content:

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();
}

When I call renderHtml , the content updates correctly. However, I see a flicker in Firefox, which causes a bad UX. I am not seeing other browsers having the same issue.

How can I fix this flicker issue in Firefox? Thanks!

Answer 1

You don't need to do the open, writeLn, close stuff. Just do the innerHTML thing.

Like this:

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');

Created this jsfiddle example:

http://jsfiddle.net/abmkntfq/