小墨の博客

梦想需要付诸行动,否则只能是梦

Firefox iframe踩坑记录(原创)

本文所属内容基于当前最新版Firefox( FF 94.0.2 (64位) )

QQ截图20211203103403.png


最近在做期末设计,开发一款web端的管理系统。

为了方便测试,我做了一个快速登录的页面,也就是说,分别访问对应的页面,就可以快速登录进入系统。登录的原理很简单,就是和正常登录一样,也是请求的和正常登录相同的api接口,只是我把预先设定好的账号密码写进去了,访问这个页面就可以直接发送请求给后端。就像下面这样👇

用户组1http://域名/u1
用户组2http://域名/u2
用户组3http://域名/u3

然后,我在登录页面和后台仪表盘首页中各嵌入了一个隐藏的iframe,同时添加了3个按钮,当点击按钮的时候,就会把对应的快速登录的这个网址赋值给这个隐藏的iframe,来实现点击登录和快速切换账号的逻辑。

在这个快速登录的页面中,做了这几件事情

  • 退出当前帐号登陆状态

  • 向api发送一个登录请求,模拟用户正常登录

  • 刷新父页面

然后,系统同时实现了:登录状态页自动重定向到后台仪表盘,未登录状态后台仪表盘跳回登录页。


以上功能在Chrome、新版Edge、QQ浏览器等浏览器都岁月静好一切正常,直到有一天用Firefox打开了这个页面,快速登录之后跳转后台仪表盘,然后后台仪表盘疯狂刷新。但是登录之后再访问后台仪表盘,又是正常的。


再三查看了代码之后,可以确定项目的代码没有问题,除了快速登录页,其他页面都不存在刷新页面或者跳转的相关代码。

用排除法,给登录页、后台仪表盘两个页面快速登录页面网址后添加了一个不同的参数(方便说明记为?from=login?from=dashboard),定位到不仅是登录页里面的iframe打开了http://域名/u1?from=login的页面,仪表盘页里面的iframe也打开了这个页面......


然后黑人问号了好半天,一直一筹莫展,因为仪表盘页里面没有from=login的相关代码,iframe的src也是给的""(同时也试过不加src=""属性,依然不行)。

F12看,这个iframe确实是加载了http://域名/u1?from=login,就**离谱...


直到我看到了这篇博客:https://www.cnblogs.com/netWild/p/11253176.html

image.png

然后突然意识到,也许这不是我的问题,而是Firefox的问题?我直接注释掉之前的iframe,然后插入了一个不带任何属性的iframe标签(<iframe></iframe>)


然后就发现了问题,竟然这个iframe里面也渲染了http://域名/u1这个页面,通过F12控制台 [网络] 标签页看出,还是请求了http://域名/u1?from=login页面


果然,是Firefox中对iframe解析造成的问题。猜测应该是当iframe没有指定src或者指定为空时,firefox会默认自动访问某些页面,但是根据我的测试,这个也比较迷,有些测试情况会造成这个结果,而有的情况则不会。


先说解决方法吧,最推荐的一种解决方法是将内容为空白页的iframe的src属性设置为"about:blank;",即

<iframe src="about:blank;"></iframe>

还有一种办法,但不是最优:在iframe标签下方紧挨着添加一个<script>标签,用JavaScript动态设置为""也能解决问题(借鉴了这篇博客:http://blog.sina.com.cn/s/blog_76d44b990100q4hq.html)

<script>
    document.getElementById("iframe的id").src="";
</script>

相当于网页加载时iframe加载瞬间停止iframe的加载。这种解决方案再用户设置了禁用JavaScript时无效。


百度搜了一下,发现没有人和我遇到一样的问题,但是同样被Firefox下的iframe坑过的人也不在少数,似乎firefox的iframe还有一些其他的问题,时间原因没有深入去研究,感兴趣的朋友们可以来研究一下,也欢迎在下方评论区和我讨论。这里贴几个跟本文讨论的内容不太一样但是同样是Firefox中iframe问题的文章👇

  • firefox的iframe问题:https://blog.csdn.net/vicky_lxw/article/details/51079078

  • FireFox的iframe显示问题:https://www.itpow.com/c/592.asp

  • FireFox中IFRAME的返回上页问题:https://blog.csdn.net/qiuqiuit/article/details/83912050


给大家踩雷了,大家之后写前端用到iframe的时候记得特别在firefox上测试一下带iframe相关的页面,说不定也会遇到一些奇奇怪怪的情况。

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:512
    • 页面总数:20
    • 分类总数:92
    • 标签总数:208
    • 评论总数:62
    • 浏览总数:235404

    | | |
    | |  Z-Blog PHP