IFrame内容未显示在隐藏的div容器中 [英] IFrame contents do not show up in an hidden div container

问题描述

在隐藏的DIV容器中显示iframe内容时遇到了一些问题.

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

点击链接后，div容器就可以看到了，到目前为止，它仍然有效，但是其中的内容(即amp-iframe本身)不会显示. 某种原因阻止了iframe加载内容.

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.

以下是一些代码摘录:

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

顺便说一句:没有显示/隐藏效果，iframe内容将被加载，并且一切正常.

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

我做错了什么?

推荐答案

以下是有效版本:

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

这篇关于IFrame内容未显示在隐藏的div容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！