专栏名称: 奇舞精选
《奇舞精选》是由奇舞团维护的前端技术公众号。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送汇总周刊内容。
今天看啥  ›  专栏  ›  奇舞精选

用iframe必定遇到过这六种“坑”之一(以vue为示例)

奇舞精选  · 公众号  · 前端  · 2024-11-07 18:00

主要观点总结

本文介绍了iframe的注意事项和关键点,包括自适应宽高、内容动态宽高、嵌入页面免登录处理、跨域问题以及常见问题的解决方案。

关键观点总结

关键观点1: iframe基于父窗口大小自适应宽高

通过绑定样式来动态设置宽高,并监听父窗口大小变化来调整iframe大小,需考虑初始化和窗口缩放的情况,以及移除事件监听器防止内存泄漏。

关键观点2: iframe基于内容动态宽高

子窗口通过window.postMessage发送具体高度给父窗口,父窗口根据接收到的内容动态调整iframe的高度。

关键观点3: iframe嵌入页面免登录处理

介绍了将HTTP转换成HTTPS、使用代理服务的两种解决方法,并详细说明了每种方法的实施步骤和注意事项。

关键观点4: 跨域问题

介绍了iframe页面的跨域问题以及浏览器的安全策略,提供了使用window.postMessage、document.domain、CORS和nginx配置代理等解决方案。

关键观点5: iframe嵌入后报拒绝连接请求

介绍了目标页面设置X-Frame-Options响应头来限制内容被嵌入到其他站点的iframe中,需要后端配合调整X-Frame-Options。


文章预览

点击 关注 公众号,“ 技术干货 ” 及时达! 前言 如果你是做 web 前端,那么不可避免早晚都会用到 iframe 的。其实博主很久前用过,但最近又要有项目用了,由于年代久远对 iframe 的注意事项都有点忘记了,然后想着总结一下比较需要注意的几个重点事项,除了便于高效工作还能分享给有需要用到 iframe 的小伙伴。 iframe基于父窗口大小自适应宽高 「简述:」  这是 iframe 最常见的需求了,有时候我们用 iframe 嵌入一个页面时,不想固定宽高想跟随父系统屏幕大小动态变化,从而大大提高适配性。 「实现思路:」   iframe 标签绑定 :style  来动态设置宽高,监听父窗口宽高变化时动态获取并且绑定到 :style ,但监听变化需要考虑到初始化和窗口缩放的情况,并且记得移除事件监听器防止内存泄漏。 「完整实现代码如下所示」
import { onMount ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览