amp-html - IFrame contents do not show up in an hidden div container
问题描述
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?
解决方案
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.
推荐阅读
- git - 如何获取 git 提交中更改的文件列表?
- laravel - 你如何将数据从服务器端 laravel 传递到路由器视图
- azure - 创建 Azure 订阅和租户需要哪些权限?
- c# - 绘制折线并显示其相关 ID
- python - 使用 python opengl (PyOpenGL) 创建几何着色器失败
- javascript - 提交而不重新加载页面
- django - 来自 Django Rest Api 框架的响应
- merge - “工作表”对象没有属性“_merged_cells”
- mysql - 错误:发送后无法设置标头。(jwt 身份验证)
- spring - 自动装配注释在 DAO 类中不起作用。使用弹簧