IFrame 内容不会显示在隐藏的 div 容器中

Question

在隐藏的 DIV-Container 中显示 Iframe 内容时遇到一些问题。

单击 link 后，div 容器就会显示出来，目前为止可以正常工作，但其中的内容（即 amp-iframe 本身）不会显示。某些东西阻止了 Iframe 加载内容。

这里是一些代码摘录：

<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>

顺便说一句：在没有 show/hide 效果的情况下，Iframe 内容被加载并且一切正常。

我做错了什么？

Answer 1

这是一个工作版本：

  <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>

在这种情况下最好使用内置的隐藏操作。

IFrame 内容不会显示在隐藏的 div 容器中

IFrame contents do not show up in an hidden div container

amp-html

accelerated-mobile-page