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中。
页面如下:
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计载入页面 1.11 定义网页的关键字 1.12 进入页面弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序
iframe是HTML中的一个标签,用于将另一个网页或文档嵌入到当前页面中。在使用iframe,可能会遇到滚动条高度显示的问题。 1. 滚动条:当嵌入的网页或文档的内容超出了iframe的显示范围,会显示滚动条以便用户能够浏览全部内容。要控制是否显示滚动条,可以使用iframe的属性"scrolling"。当设置"scrolling"为"yes",会显示滚动条;设置为"no",不显示滚动条。 例如: <iframe src="example.html" width="500" height="300" scrolling="yes"></iframe> 上述代码会显示一个宽度为500px,高度为300px的iframe,并显示滚动条以浏览嵌入的example.html页面的全部内容。 2. 高度显示:iframe高度可以使用"height"属性来控制。可以设置固定的像素值,也可以根据嵌入的网页或文档的内容来自动适应高度。 如果希望根据内容自动适应高度,可以使用JavaScript来实现动态调整iframe高度。通过检测嵌入的网页或文档的内容高度,然后将该高度动态赋值给iframe高度属性。 例如: <script> function adjustIframeHeight() { var iframe = document.getElementById("myIframe"); var iframeBody = iframe.contentDocument.body; iframe.style.height = iframeBody.scrollHeight + "px"; } </script> <iframe id="myIframe" src="example.html" width="500" onload="adjustIframeHeight();"></iframe> 上述代码会在页面加载完成后,通过JavaScript动态调整iframe高度,使其根据嵌入的example.html内容自动适应。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值