WordPress.org
Get WordPress

Make WordPress Core

Changeset 29513


Ignore:
Timestamp:
08/17/2014 03:42:03 AM (10 years ago)
Author:
azaozz
Message:

TinyMCE wpView: add small delay before inserting wpview sandbox iframes into the DOM. Fixes a problem in Firefox that may prevent rendering them. Fixes #29241.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/js/mce-view.js

    r29471 r29513  
    128128                    content.innerHTML = '';
    129129
    130                     iframe = dom.add( content, 'iframe', {
    131                         src: tinymce.Env.ie ? 'javascript:""' : '',
    132                         frameBorder: '0',
    133                         allowTransparency: 'true',
    134                         scrolling: 'no',
    135                         'class': 'wpview-sandbox',
    136                         style: {
    137                             width: '100%',
    138                             display: 'block'
     130                    // Seems Firefox needs a bit of time to insert/set the view nodes, or the iframe will fail
     131                    // especially when switching Text => Visual.
     132                    setTimeout( function() {
     133                        iframe = dom.add( content, 'iframe', {
     134                            src: tinymce.Env.ie ? 'javascript:""' : '',
     135                            frameBorder: '0',
     136                            allowTransparency: 'true',
     137                            scrolling: 'no',
     138                            'class': 'wpview-sandbox',
     139                            style: {
     140                                width: '100%',
     141                                display: 'block'
     142                            }
     143                        } );
     144
     145                        iframeDoc = iframe.contentWindow.document;
     146
     147                        iframeDoc.open();
     148                        iframeDoc.write(
     149                            '<!DOCTYPE html>' +
     150                            '<html>' +
     151                                '<head>' +
     152                                    '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
     153                                '</head>' +
     154                                '<body data-context="iframe-sandbox" style="padding: 0; margin: 0;" class="' + editor.getBody().className + '">' +
     155                                    html +
     156                                '</body>' +
     157                            '</html>'
     158                        );
     159                        iframeDoc.close();
     160
     161                        resize = function() {
     162                            // Make sure the iframe still exists.
     163                            iframe.contentWindow && $( iframe ).height( $( iframeDoc.body ).height() );
     164                        };
     165
     166                        if ( MutationObserver ) {
     167                            new MutationObserver( _.debounce( function() {
     168                                resize();
     169                            }, 100 ) )
     170                            .observe( iframeDoc.body, {
     171                                attributes: true,
     172                                childList: true,
     173                                subtree: true
     174                            } );
     175                        } else {
     176                            for ( i = 1; i < 6; i++ ) {
     177                                setTimeout( resize, i * 700 );
     178                            }
    139179                        }
    140                     } );
    141 
    142                     iframeDoc = iframe.contentWindow.document;
    143 
    144                     iframeDoc.open();
    145                     iframeDoc.write(
    146                         '<!DOCTYPE html>' +
    147                         '<html>' +
    148                             '<head>' +
    149                                 '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
    150                             '</head>' +
    151                             '<body data-context="iframe-sandbox" style="padding: 0; margin: 0;" class="' + editor.getBody().className + '">' +
    152                                 html +
    153                             '</body>' +
    154                         '</html>'
    155                     );
    156                     iframeDoc.close();
    157 
    158                     resize = function() {
    159                         // Make sure the iframe still exists.
    160                         iframe.contentWindow && $( iframe ).height( $( iframeDoc.body ).height() );
    161                     };
    162 
    163                     if ( MutationObserver ) {
    164                         new MutationObserver( _.debounce( function() {
    165                             resize();
    166                         }, 100 ) )
    167                         .observe( iframeDoc.body, {
    168                             attributes: true,
    169                             childList: true,
    170                             subtree: true
    171                         } );
    172                     } else {
    173                         for ( i = 1; i < 6; i++ ) {
    174                             setTimeout( resize, i * 700 );
    175                         }
    176                     }
     180                    }, 50 );
    177181                });
    178182            } else {
Note: See TracChangeset for help on using the changeset viewer.