vue 使用 iFrame 嵌套带有登录的网站登录成功无法跳转

LZQ <=小氣鬼=>

已于 2024-09-18 11:09:12 修改

阅读量2.1k

点赞数 3

文章标签：前端

于 2024-03-15 13:56:43 首次发布

本文链接：https://blog.csdn.net/id_EquinoxFlower/article/details/136735796

版权

博客主要讲述了iFrame标签使用中的问题。项目用iFrame嵌套网址，未登录浏览没问题；嵌套带登录的网址，需注意是否在同一域名下，否则登录成功可能无法跳转。在Vue项目中用iFrame嵌套本地.html文件，其向父页面抛出的方法或参数跳出页面也不销毁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题有点好玩，当时做的时候没想起来，哎不说讲一下问题

1.项目在使用iFrame标签嵌套其他，网址或者自己的网址的时候如果没有登录只是浏览是没有问题的

2.如个你使用Frame标签嵌套的网址是带有登录的需要注意两个网站是不是在统一域名下面如果在就可以正常登录，如果不在的话会出现登录成功但是无法跳转的问题

3.在Vue项目中使用iFrame 嵌套本地.html文件，本地.html文件向父页面抛出的方法或者参数会一直保留即使跳出当前页面也不会销毁掉所以看一下代码

// 使用Vue的页面销毁的生命周期
// vue3 写法
// 接收消息函数
onMounted(()=>{
  window.addEventListener("message", handleMessage);
})
function handleMessage(e) {
  const { load, progress } = e.data
 if (load) {
}
}
onBeforeUnmount(() => {
  // 移除事件监听器
  window.removeEventListener("message", handleMessage);
})

// vue2 写法

mounted(){
window.addEventListener("message", this.handleMessage);
}
handleMessage(e) {
  const { load, progress } = e.data
 if (load) {
}
}

beforeDestroy ()  {
  // 移除事件监听器
  window.removeEventListener("message", this.handleMessage);
}