1. 希知网首页
  2. 信息技术与社交网络

iframe用法有什么，iframe 用法

• 信息技术与社交网络

内容：

iframe 全屏显示通过代码切换 iframe 中的页面iframe 中页面调用父页面中的方法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 在多页面开发中经常会用到。

1.iframe 全屏显示

如果需要在页面中控制 iframe 的高度和宽度，则必须将所在页面的高度和宽度先调整为 100%；如：

html, body, #app { height: 100%; width: 100%;}

100% 也可以写成 100vh、100vw。

然后通过 css 来调整 iframe 的大小，如：

<iframe id="page" name="pageFrame" class="frame"/>.frame { margin: 12px; width: calc(100vw – 26px); height: calc(100vh – 126px); border: 1px solid #fff; border-radius: 6px; background-color: #fff;}2.通过代码切换 iframe 中的页面

我们一般情况下，采用 iframe 的 src 属性来控制其中显示的页面，但当 iframe 中的页面跳转到其他页面时，这是我们改变 src 属性的值，iframe 不会将页面切换到要显示的页面，所以可以通过代码来控制 iframe 加载的页面，如针对上面代码中的 iframe 标签，相应的代码为：

document.getElementById('page').contentWindow.location = '/first.html'3.iframe 中页面调用父页面中的方法

在 Vue 中使用 iframe 时，我们要实现 iframe 中的页面调用父页面中的方法，可以使用 postMessage 消息传递的方式来实现，如：

父页面中的代码：

window.addEventListener('message', function(e){ if (e.data.data === 'refresh-avatar') load_my_avatar() })

iframe 中的页面代码：

window.parent.postMessage({ data :"refresh-avatar" },'*');

本文地址：https://www.cknow.cn/archives/29042

以上内容源自互联网，由百科助手整理汇总，其目的在于收集传播生活技巧，行业技能，本网站不对其真实性、可靠性承担任何法律责任。特此声明！

如发现本站文章存在版权问题，烦请提供版权疑问、侵权链接、联系方式等信息发邮件至candieraddenipc92@gmail.com，我们将及时沟通与处理。

赞 (0)
上一篇 2023年7月22日 17:55
下一篇 2023年7月22日 18:11

相关推荐