Changeset 37093

Timestamp:

03/30/2016 10:56:44 AM (9 years ago)

Author:

swissspidy

Message:

Embeds: Improve how iframes are loaded after being initially hidden.

Use a more accessible way to initially hide the iframe. After that, only display an iframe when it was successfully loaded.

Merge of [36648] and [36708] to the 4.4 branch.

Fixes #35894.

Location:

branches/4.4

Files:

• src/wp-includes/embed.php (modified) (2 diffs)
• src/wp-includes/js/wp-embed.js (modified) (3 diffs)
• tests/phpunit/tests/oembed/filterResult.php (modified) (2 diffs)

branches/4.4/src/wp-includes/embed.php

@@ -777 +777 @@
     if ( ! empty( $content[1] ) ) {
         // We have a blockquote to fall back on. Hide the iframe by default.
-        $html = str_replace( '<iframe', '<iframe style="display:none;"', $html );
+        $html = str_replace( '<iframe', '<iframe style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"', $html );
         $html = str_replace( '<blockquote', '<blockquote class="wp-embedded-content"', $html );
     }
@@ -953 +953 @@
  */
 function _oembed_filter_feed_content( $content ) {
-    return str_replace( '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;"', '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"', $content );
+    return str_replace( '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"', '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"', $content );
 }
 

branches/4.4/src/wp-includes/js/wp-embed.js

@@ -51 +51 @@
             }
 
-            source.style.display = '';
+            source.removeAttribute( 'style' );
 
             /* Resize the iframe on request. */
@@ -87 +87 @@
             return;
         }
+
         loaded = true;
 
@@ -92 +93 @@
             isIE11 = !!navigator.userAgent.match( /Trident.*rv:11\./ ),
             iframes = document.querySelectorAll( 'iframe.wp-embedded-content' ),
-            blockquotes = document.querySelectorAll( 'blockquote.wp-embedded-content' ),
             iframeClone, i, source, secret;
-
-        for ( i = 0; i < blockquotes.length; i++ ) {
-            blockquotes[ i ].style.display = 'none';
-        }
 
         for ( i = 0; i < iframes.length; i++ ) {
             source = iframes[ i ];
-            source.style.display = '';
 
             if ( source.getAttribute( 'data-secret' ) ) {

branches/4.4/tests/phpunit/tests/oembed/filterResult.php

@@ -84 +84 @@
         $actual = wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' );
 
-        $this->assertEquals( '<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;"></iframe>', $actual );
+        $this->assertEquals( '<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"></iframe>', $actual );
     }
 
@@ -91 +91 @@
         $actual = wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' );
 
-        $this->assertEquals( '<blockquote class="wp-embedded-content"><a href=""></a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;"></iframe>', $actual );
+        $this->assertEquals( '<blockquote class="wp-embedded-content"><a href=""></a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"></iframe>', $actual );
     }