你对iframe知道多少

当前位置:

首页 > temp > JavaScript教程 >

你对iframe知道多少

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"

栏目列表