iframe:切换页面后,记录当前iframe页面滚动条的高度,再次打开时滚动到相应位置

// 点击选项卡菜单
	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中。
页面如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值