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"
