最近遇到个特别特别的需求,跨域登录,用户想在一个大屏上实现多个大屏的展示,每个大屏都需要登录,通过iframe实现,因为跨域,输入用户密码登录系统,又重定向到登录界面(具体四分屏代码可看附件)
<div class="container">
<iframe src="https://www.baidu.com/" frameborder="1" class="corner-box top-left" onclick="toggleSize(this)"></iframe>
<iframe id = 'wy' src="https://www.baidu.com/" frameborder="1" class="corner-box top-right"
onclick="toggleSize(this)" security="restricted" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe>
<iframe src="https://www.baidu.com/" frameborder="1" class="corner-box bottom-left" onclick="toggleSize(this)"></iframe>
<iframe src="https://www.baidu.com/" frameborder="1" class="corner-box bottom-right" onclick="toggleSize(this)"></iframe>
</div>
根本原因是跨域问题造成,什么是跨域,相信很多小伙伴和我一样,最开始是懵的,讲跨域就得讲同源策略(借鉴csdn现有讲得比较详细的一篇文章):
1.什么是同源策略?
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能
所谓同源是指: 协议,域名,端口都相同,就是同源, 否则就是跨域
http://www.baidu.com:80/index.html
协议: http/https/…
一级域名: baidu.com/taobao.com
二级域名: www/study/edu/…
端口号: 80/3306/…
// 协议+一级域名+二级域名+端口号都相同, 所以同源
http://www.it666.com:80/index.html
http://www.it666.com:80/detail.html
// 协议不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
https://www.it666.com:80/index.html
// 一级域名不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://www.itzb.com:80/index.html
// 二级域名不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://edu.it666.com:80/index.html
// 端口号不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://www.it666.com:8090/index.html
使用iframe引入平台,因为不同源,子页面没办法设置cookie,所以登录报错,解决方法:
将token可设置在localstorage或者sessionstorage中使用
1.SessionStorage和LocalStorage简介
和Cookie一样, SessionStorage和LocalStorage也是用于存储网页中的数据的
2.Cookie、 SessionStorage、LocalStorage区别
2.1生命周期(同一浏览器下)
Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间
SessionStorage生命周期: 仅在当前会话(窗口)下有效,关闭窗口或浏览器后被清除, 不能设置过期时间
LocalStorage生命周期: 除非被清除,否则永久保存
2.2容量
Cookie容量: 有大小(4KB左右)和个数(20~50)限制
SessionStorage容量: 有大小限制(5M左右)
LocalStorage容量: 有大小限制(5M左右)
2.3网络请求
Cookie网络请求: 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
SessionStorage网络请求: 仅在浏览器中保存,不参与和服务器的通信
LocalStorage网络请求: 仅在浏览器中保存,不参与和服务器的通信
3.Cookie、 SessionStorage、LocalStorage应用场景
Cookie: 判断用户是否登录
LocalStorage: 购物车
sessionStorage: 表单数据
4.注意点:
无论通过以上哪种方式存储的数据, 切记不能将敏感数据直接存储到本地
示例:
// 存储cookie
document.cookie = "myName=hhh;path=/;domain=127.0.0.1;";
//存储sessionStorage,删除sessionStorage,清空sessionStorage
sessionStorage.setItem("age", "34");
sessionStorage.removeItem("age");
sessionStorage.clear();
//存储localStorage,删除localStorage,清空localStorage
localStorage.setItem("name", "lnj");
localStorage.removeItem("name");
localStorage.clear();
四分屏代码块:可把百度地址更换即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div大小切换</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
position: relative;
width: 2560px;
height: 1440px;
background-color: #003057;
overflow: hidden;
}
.corner-box {
position: absolute;
width: 1280px;
height: 720px;
cursor: pointer;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
}
.corner-box.top-left { top: 0; left: 0; background-color: #003057; }
.corner-box.top-right { top: 0; right: 0; background-color: #003057; }
.corner-box.bottom-left { bottom: 0; left: 0; background-color: #003057; }
.corner-box.bottom-right { bottom: 0; right: 0; background-color: #003057; }
.corner-box.large {
width: 99.9%;
height: 99.9%;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<iframe src="https://www.baidu.com/" frameborder="1" class="corner-box top-left" onclick="toggleSize(this)"></iframe>
<iframe id = 'wy' src="https://www.baidu.com/" frameborder="1" class="corner-box top-right"
onclick="toggleSize(this)" security="restricted" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe>
<iframe src="https://www.baidu.com/" frameborder="1" class="corner-box bottom-left" onclick="toggleSize(this)"></iframe>
<iframe src="https://www.baidu.com/" frameborder="1" class="corner-box bottom-right" onclick="toggleSize(this)"></iframe>
</div>
<script>
function toggleSize(element) {
if (element.classList.contains('large')) {
element.style.transform = 'scale(1)';
element.classList.remove('large');
} else {
element.style.transform = 'scale(1)';
element.classList.add('large');
}
}
</script>
</body>
</html>