Feature Request: Insert new <iframe> on each live preview update

[andersaloof]

While developing a site with plain HTML and React custom elements mixed together (using https://github.com/PixelsCommander/ReactiveElements), editing content with live preview makes all event listeners in the React custom elements to stop functioning after the first edit of some content.

This is probably due to the fact that React attaches a global event listener, and when the HTML is overwritten with new content fetched with AJAX, the event listener is attach to a non-existing document root and not working until you do a hard page refresh.

A related issue to this feature request is #2120.

I took a look at LivePreview.js and did some local debugging and modifications and got it working by inserting a new <iframe> on each successfull update, instead of just overwriting the html of the existing <iframe>. By inserting a new <iframe>, the HTML document is a new instance, and all event listeners keeps working as expected.

Basically I changed handleSuccess in LivePreview.js to this:

handleSuccess: function(data) {
    var iframe = $('<iframe class="lp-iframe" frameborder="0"/>').appendTo(this.$iframeContainer);

    iframe[0].contentWindow.document.open();
    iframe[0].contentWindow.document.write(data);
    iframe[0].contentWindow.document.close();

    this.onResponse();
},

This needs to be tidied up of course (for instance, the <iframe> should be replaced instead of appened to the container or else you end up with a lot of iframes), but is works as a proof of concept for a better approach to updating the iframe with new content.

[michaelhue]

+1 for replacing $iframe on each update instead of appending to$iframeContainer. This way, plugins can still change the Live Preview structure (e.g. Breakpoint).

[brandonkelly]

Implemented for 3.1! (93db58e)

[andersaloof]

Great!

Is there a roadmap towards 3.1?

[brandonkelly]

It’s currently in Dev Preview: https://craftcms.com/blog/craft-3-1-dev-preview-is-here

We’re doing our best to have it finished by the end of the year.