iframe 嵌套第三方页面出现的问题

我们需要通过一个接口获取被嵌套的地址。
然后将改地址赋值给iframe的src中,代码如下
<template>
<div>
<iframe
:src="httpIframeUrl"
class="whiframe"
scrolling="yes"
></iframe>
</div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
setup() {
let route = useRoute()
let httpIframeUrl = ref('')
if (route.query.processInstanceId) {
this,$apihttps.then(res => {
//返回后将值赋值到iframe的src
httpIframeUrl.value = res
})
.catch(() => {
window.$message.error('地址未获取到')
})
} else {
window.$message.error('未获取到流程实例')
}
return { httpIframeUrl }
},
})
</script>
<style lang="scss" scoped>
.whiframe {
width: 100%;
height: 100%;
}
</style>

出现了意外的情况

我以为这样就万事大吉了,可以愉快的下班!
可是意外发生了~~~呜呜
无法打开页面,
我根据提示添加了
sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups"
<iframe
:src="httpIframeUrl"
class="whiframe"
scrolling="yes"
sandbox="allow-scripts
allow-top-navigation
allow-same-origin
allow-popups"
></iframe>
sandbox的几个常用属性
allow-scripts==>表示允许被嵌套的子页面执行script
allow-top-navigation==>允许 iframe 内容从包含文档导航(加载)内容。
allow-forms==>允许表单提交
allow-same-origin==>允许不同源【处理跨域】
本以为可以溜之大吉了,结果......

又又出现意外了

Chrome 80以及以上的版本中,重新恢复SameSite cookie策略.
只要在Chrome80浏览器中iframe是携带了cookie,
这个cookie在iframe中会被丢失,从而依赖cookie的接口会出现问题~~
开解决办法:后端设定 Set-Cookie 为 SameSite=None; Secure
并且要在HTTPS协议下该Cookie才会被发送
有些的小伙伴会说:我的火狐浏览器没有,是这样的!
内核是谷歌的浏览器80版以上就会出现这样的情况。
这样处理后就ok了,然后就下班了,哎!

iframe 进行延迟加载

<iframe src="your url"
loading="lazy"
width="100%"
height="100%"></iframe>
机制小伙伴发现了多了loading="lazy" loading目前已经支持三种属性值
lazy==>延迟加载的理想选择。
eager==>立即加载(非延迟加载的理想选择)
auto=>由浏览器来决定是否延迟加载

iframe 下载文件

<iframe sandbox="allow-downloads"></iframe>
allow-downloads==>允许下载文件
我看见有的小伙伴在使用
allow-downloads-without-user-activation,个人不建议使用。
因为他表示没有征求用户同意的情况下下载文件。

iframe下打开新窗口的正确姿势

// 子页面使用这两种方式打开会出现的问题是:
// 他们会将父页面的窗口'干掉',然后打开窗
top.location.href = location.href;
parent.location.href='http://www.baidu.com';
// 正确的使用方式
// 下面这种方式会将在父页面的容器下打开窗口。
window.location.href="http://www.baidu.com"

你对iframe知道多少的更多相关文章

  1. 完美判断iframe是否加载完成

    var iframe = document.createElement("iframe"); iframe.style.width = "265px"; ifr ...

  2. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. iframe用法

    <iframe src="http://caiyanli.top/" height="500"  width="500" frameb ...

  5. 如何获取url中的参数并传递给iframe中的报表

    在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...

  6. JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

    1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...

  7. ASP.NET 页面禁止被 iframe 框架引用

    两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...

  8. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

  9. 解决iframe作为子窗口,刷新后iframe页面跳转到其它页面的问题

    转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗 ...

  10. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

随机推荐

  1. 教你用ab命令进行并发与压力测试

    摘要:今天给大家分享一篇如何使用ab进行并发与压力测试的文章 本文分享自华为云社区<[高并发]如何使用ab进行并发与压力测试?>,作者:冰 河. 今天给大家分享一篇如何使用ab进行并发与压 ...

  2. 在Spark Scala/Java应用中调用Python脚本,会么?

    摘要:本文将介绍如何在 Spark scala 程序中调用 Python 脚本,Spark java程序调用的过程也大体相同. 本文分享自华为云社区<[Spark]如何在Spark Scala/ ...

  3. 插件化架构设计(3):前端可视化化平台插件架构-grafana实践

    插件实践方案 其实插件你就把它当一个组件来用就好.用起来就是异步组件加载. vue异步组件加载,看官方文档:https://cn.vuejs.org/v2/guide/components-dynam ...

  4. Kubernetes(K8S) 常用命令

    Docker 常用命令 Docker 常用命令 # 查看API版本 [root@k8smaster ~]# kubectl api-versions # 重启 K8S [root@k8smaster ...

  5. SpringBoot Admin OFFLINE

    java.util.concurrent.TimeoutException message Did not observe any item or terminal signal within 100 ...

  6. 基于C++11特性的线程池

    写在前面:本文学习自基于C++11实现线程池,代码部分均属于该博主,自己只是想记录以下自己的认知,并以这种方式加深一下自己对于多线程的理解 1 前置知识 RAII管理机制 简单来说RAII机制是一种对 ...

  7. Q查询进阶操作 ORM查询优化 only与defer select_related与prefetch_related ORM事务 ORM常用字段类型 ORM常用字段参数

    目录 Q查询进阶操作 children.append 图书查询功能 ORM查询优化 惰性查询 自动分页 limit only与defer only defer select_related与prefe ...

  8. 写SAE评测,获 Airpods 2大奖【集结令】!

    Serverless 应用引擎 SAE 开启测评有奖!名额有限,先到先得! Serverless应用引擎SAE是一款极简易用.自适应弹性的容器化应用平台.现面向所有用户发出诚挚邀请,参与一分钟部署在线 ...

  9. 使用element-plus的el-scrollbar时滚动条没有显示出来但是页面可以滚动的解决办法

    如果使用 Element UI 的 el-scrollbar 组件时,滚动条没有显示出来但页面可以滚动,可以尝试调用其 update 方法来更新滚动条. 在适当的时机(例如在数据加载完成后或组件更新后 ...

  10. WPF Prism框架Region失效了?

    站长最近转载了痕迹的Prism 8系列博文,不知道你对该框架是否有一定了解了?不了解,可以看看本号转载的系列: WPF Prism框架合集(2.创建Prism应用程序) WPF Prism框架合集(3 ...