📖 Warn when using a consent promptUI that contains an iframe (ampproj…

…ect#35986) Because of the rendering cycle, a `promptUI` that contains an `amp-iframe` may cause content flashing. `promptUISrc` can be used instead and prevent that issue.
BroadBandyDev · Sep 9, 2021 · cd5e0a9 · cd5e0a9
1 parent 12a897f
commit cd5e0a9
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/extensions/amp-consent/0.1/consent-ui.js b/extensions/amp-consent/0.1/consent-ui.js
@@ -15,6 +15,7 @@ import {
   whenUpgradedToCustomElement,
 } from '#core/dom/amp-element-helpers';
 import {setImportantStyles, setStyles, toggle} from '#core/dom/style';
+import {isEsm} from '#core/mode';
 
 const TAG = 'amp-consent-ui';
 const MINIMUM_INITIAL_HEIGHT = 10;
@@ -196,6 +197,13 @@ export class ConsentUI {
           promptUI
         );
       }
+      // Warn of use of <amp-iframe> within a promptUI element.
+      if (!isEsm() && promptElement.querySelector('amp-iframe')) {
+        user().error(
+          TAG,
+          '`promptUI` element contains an <amp-iframe>. This may cause content flashing when consent is not required. Consider using `promptUISrc` instead. See https://go.amp.dev/c/amp-analytics'
+        );
+      }
       this.ui_ = dev().assertElement(promptElement);
     } else if (promptUISrc) {
       // Create an iframe element with the provided src