Vue进阶(六十四):iframe更改src后页面未刷新问题解决_vue iframe 重新点击不会刷新问题

233 阅读3分钟

ES6

  • 列举常用的ES6特性:

  • 箭头函数需要注意哪些地方?

  • let、const、var

  • 拓展:var方式定义的变量有什么样的bug?

  • Set数据结构

  • 拓展:数组去重的方法

  • 箭头函数this的指向。

  • 手写ES6 class继承。

微信小程序

  • 简单描述一下微信小程序的相关文件类型?

  • 你是怎么封装微信小程序的数据请求?

  • 有哪些参数传值的方法?

  • 你使用过哪些方法,来提高微信小程序的应用速度?

  • 小程序和原生App哪个好?

  • 简述微信小程序原理?

  • 分析微信小程序的优劣势

  • 怎么解决小程序的异步请求问题?

其他知识点面试

  • webpack的原理

  • webpack的loader和plugin的区别?

  • 怎么使用webpack对项目进行优化?

  • 防抖、节流

  • 浏览器的缓存机制

  • 描述一下二叉树, 并说明二叉树的几种遍历方式?

  • 项目类问题

  • 笔试编程题:

最后

技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。 开源分享:docs.qq.com/doc/DSmRnRG…

文章目录


一、场景描述

在项目开发过程中,应用iframe实现外系统页面嵌套的时候,发现引入其他页面后,页面内容并未刷新加载,经过一番研究,解决方案如下:

vm.iframeSrc = iframeSRC
if (document.getElementById('iframe')) {
	setTimeout(() => {
		document.getElementById(iframeid).contentWindow.location.reload(true);
	}, 200)
}

注:务必在更改iframe src属性值之后补充页面重载逻辑,否则无法解决问题。

注:window.reload是重新加载当前需要的所有内容,也就包括页面和后台的代码,此过程中实际上是从后台重新进行操作;

二、高版本浏览器页签切换后内容不刷新问题解决

在应用上面的解决措施后,发现Chrome(>75)及IE高版本浏览器下,iframe在更改了src之后对应的网页并未刷新问题复现。

2.1 解决思路

iframe下页面内容未刷新问题其实是由于页面未重新渲染导致的,但是通过在src中添加时间戳以达到欺骗浏览器重新渲染的目的并未解决以上问题,后通过v-if实现销毁新建iframe方式,完美解决问题。

2.2 解决措施

<iframe v-if="flagsArr[index]" :src='...+timeStamp'></iframe>
handleSelect (tab, event) {
	this.index = tab.index
	this.flagsArr = Array(页签数组.length).fill(false)
	this.flagsArr[this.index] = true
	vm.iframeSrc = iframeSRC
## ❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**

> ![前端校招面试题精编解析大全](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/74e4994a724c40c18c0429a25e9ba558~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325484&x-signature=kp93tonIh%2BVf6BX8674i2h5DlMQ%3D)
>