JS implementation of non-flickering updates to webpage content

JS implementation of non-flickering updates to webpage content

This article mainly introduces the implementation of JS without flashing and updating the webpage content. If you need it, refer to it.

Todo list

 

The problem of non-flashing web pages is relatively large.

 

The loaded html string (obtained through ajax). If you still need to run the code, there must be a problem.

 

You want to use an undisplayed iframe to host this object. This is a bit of dirty work.

 

The final solution is

 

The Code is as follows:

Var str2DOMElement = function (html ){

Var frame = document. createElement ('iframe ');

Frame. style. display = 'none ';

Document. body. appendChild (frame );

Frame. contentDocument. open ();

Frame. contentDocument. write (html );

Frame. contentDocument. close ();

Var el = frame. contentDocument. body. firstChild;

Document. body. removeChild (frame );

Return el;

}

Var markup = '<div> <p> text here </p> </div> ';

Var el = str2DOMElement (markup );