1

I have got some problems while displaying an Iframe content within hidden DIV-Container.

As soon as the link gets clicked, the div container gets visible, that works so far, but the content within, which is an amp-iframe itself do not show up. Something is preventing the Iframe from loading the content.

Here is some code extract:

<a href="#" class="bsel" [text]="visible ? 'On' : 'Off'" on="tap:AMP.setState({visible: !visible})">
 Click me
 </a>
......
<div id="showInfo" [class]="visible ? 'show' : 'hide'" class="hide">
   <amp-iframe width=600 height=500 scrolling=yes frameborder="1"
                            layout="responsive"
                            sandbox="allow-scripts allow-same-origin"
                            src="xxxxxxxx">......</div>

BTW: Without the show/hide effect the Iframe contents gets loaded and everything works alright.

What I am doing wrong?

Christian Felix
  • 644
  • 1
  • 9
  • 28
  • 1
    As referred with this [thread](https://stackoverflow.com/questions/45362639), if you are having problems with your iframe displaying, add a placeholder image to your iframe element. This will allow you to circumvent the `75%/600px` restriction. From this [documentation](https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md): *An `amp-iframe` may not appear close to the top of the document.The iframe must be either 600 px away from the top or not within the first 75% of the viewport when scrolled to the top, whichever is smaller.* – abielita Jun 06 '18 at 16:09
  • @abielita, sorry my fault, I have should paste the rest of the code, an placeholder is already there. – Christian Felix Jun 06 '18 at 17:34

1 Answers1

3

Here is a working version:

  <a href="#" class="bsel" [text]="visible ? 'On' : 'Off'" on="tap:showInfo.toggleVisibility">
    Click me
  </a>

  <div id="showInfo" hidden>
    <amp-iframe width=600 height=500 scrolling=yes frameborder="1" layout="responsive" sandbox="allow-scripts allow-same-origin" src="https://ampbyexample.com">
      <div placeholder></div>
    </amp-iframe>
  </div>

It's better to use the built-in hidden action in this case.

Sebastian Benz
  • 4,238
  • 1
  • 21
  • 17
  • thank you for your response. My first approach was build upon the built-in hidden functionality, till I was pointed to the AMP.setState solution. Anyway, both approaches prevents the amp-iframe content from being loaded....should I mention this problem in github? – Christian Felix Jun 06 '18 at 14:53
  • seems as if the problem resides somewhere else, I got some violation messages whithin my dev-toolbar, [violation] 'load' handler took 229ms he resource https://tpc.googlesyndication.com/safeframe/1-0-27/html/container.html was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it Please make sure it has an appropriate `as` value and it is preloaded intentionally. – Christian Felix Jun 07 '18 at 08:06
  • whatever the circumstances are I consider this issue as solved. Thank you. – Christian Felix Jun 07 '18 at 08:28