// 点击选项卡菜单
function activeTab() {
//获得即将离开得tab项,并保存此刻滚动条得高度
//1.获得激活菜单得dataId
let dataId = '';
$('.page-tabs-content .J_menuTab').each(function() {
if($(this).hasClass('active')){
dataId = $(this).data('id');
}
});
//2.tab和iframe 中的dataId一致,可以获取即将离开页面的滚动高度
$('.J_mainContent .J_iframe').each(function() {
if ($(this).data('id') == dataId) {
//此处可以保存滚动高度到cookie,或者内部数组
//获取网页的高度
let iframe = $(this)[0];
//获取iframe的window对象
let iwindow = iframe.contentWindow;
//获取iframe的document
let idoc = iwindow.document;
//获取iframe的html
let documentElement = idoc.documentElement;
//最后获取滚动高度,iframe与一般的dome元素不同,可以认为是一个浏览器页对象
let scrollTop = $(documentElement).scrollTop();
//保存到cookie中,时长1天
setCookie(dataId,scrollTop,1);
return false;
}
});
if (!$(this).hasClass('active')) {
var currentId = $(this).data('id');
// 显示tab对应的内容区
$('.J_mainContent .J_iframe').each(function() {
if ($(this).data('id') == currentId) {
$(this).show().siblings('.J_iframe').hide();
//在即将打开页面得 还原滚动条得原始高度
//1.从cookie中获取高度
let scrollTop = getCookie(currentId);
//2.设置iframe中滚动条高度
let documentElement = $(this)[0].contentWindow.document.documentElement;
$(documentElement).scrollTop(scrollTop);
return false;
}
});
$(this).addClass('active').siblings('.J_menuTab').removeClass('active');
scrollToTab(this);
}
}
/**
* [封装方法]
*/
/**
* [setCookie 设置cookie]
* [key value t 键 值 时间(秒)]
* t: 单位天
*/
function setCookie(key,value,t){
var oDate=new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie=key+"="+value+"; expires="+oDate.toDateString();
}
/**
* [getCookie 获取cookie]
*/
function getCookie(key){
var arr1=document.cookie.split("; ");//由于cookie是通过一个分号+空格的形式串联起来的,所以这里需要先按分号空格截断,变成[name=Jack,pwd=123456,age=22]数组类型;
for(var i=0;i<arr1.length;i++){
var arr2=arr1[i].split("=");//通过=截断,把name=Jack截断成[name,Jack]数组;
if(arr2[0]==key){
return decodeURI(arr2[1]);
}
}
}
该方法触发条件为切换tab时,前端框架为:H+
iframe:可以认为是一个浏览器页,在iframe页面中使用location.href=xxxx, 跳转之后的页面依然会显示在iframe中。
页面如下: