layui问题之自动滚动二级iframe页面到指定位置的方法
一、问题
前提:用的layui框架
目标:改变iframe页面滚动条位置
问题:没有麻溜溜的滚。。
二、经过
刚开始,以为只要滚动iframe里面的元素就行了,页面所有元素都在section里面,就通过section使滚动条滚动
$('section.layui-larry-box').scrollTop(300);
可想而知,不行
然后,又试了div啥的
最后直接试了包含这个页面的iframe标签,让iframe滚动
$(this).children('iframe').scrollTop(300);
不行。。
三、解决
最后看了一下原生js使iframe滚动的方法
document.getElementById('ghrzFrame').contentWindow.scrollTop=50;
感觉jq也要加一个类似contentWindow功能的函数
结果:
$(this).children('iframe').contents().scrollTop(300);
以上这篇layui问题之自动滚动二级iframe页面到指定位置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
layui多iframe页面控制定时器运行的方法
我们web页面中有几个页面是有定时器在刷新的,并且查询的内容还不少,给服务器造成了不少压力.这些接口已经尽量优化,能放到缓存的都放到缓存.然后主管又提了一个需求,就是我们使用的是layui多标签iframe框架,当不在某个页面的iframe时不要执行定时器.我觉得这是一个挺不错的提议,而且实现起来也不难. 粗略地考虑有两个思路,一个是点击标签时开启或关闭定时器,一个是定时器执行时判断所在的iframe是否隐藏,如果隐藏则不执行定时器的方法.第一种维护麻烦,难免有错漏的情况,而且和别的iframe
-
layui type2 通过url给iframe子页面传值的例子
A页面 调用layui.layer.open layui.use(["layer"], function () { layui.layer.open({ type: 2, title: "管理角色拥有的部门", btn: ["确定修改", "关闭"], content: '@Url.Content("~/Role/UserRoleView?rid=")'+a[0].ID + '&uid=' + a[
-
layer弹出子iframe层父子页面传值的实现方法
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下: 父页面获取子页面元素 格式: $("#iframeID").contents().find("#eleID") 示例代码: father.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
-
layui问题之自动滚动二级iframe页面到指定位置的方法
一.问题 前提:用的layui框架 目标:改变iframe页面滚动条位置 问题:没有麻溜溜的滚.. 二.经过 刚开始,以为只要滚动iframe里面的元素就行了,页面所有元素都在section里面,就通过section使滚动条滚动 $('section.layui-larry-box').scrollTop(300); 可想而知,不行 然后,又试了div啥的 最后直接试了包含这个页面的iframe标签,让iframe滚动 $(this).children('iframe').scrollTop(3
-
js,jquery滚动/跳转页面到指定位置的实现思路
要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <
-
使用postMesssage()实现跨域iframe页面间的信息传递方法
由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现: 1. 子页面url传参 简单说来就是把所有需要传递的参数加到与主页面同源的url上,将子页面重定向到该url,然后主页面通过iframe的src获取这些参数 过程非常复杂,不建议使用这种方法 2. postMessage() postMesssage()是HTML5提供的一个基于事件的消息传输API,可以实现跨文本档.多窗
-
不用锚点也可以平滑滚动到页面的指定位置实现代码
不用锚点也可以平滑滚动到页面的指定位置 复制代码 代码如下: <!DOCTYPE html> <html > <head> <meta content="text/html; charset=utf-8" /> <title>ScrollTo:平滑滚动到页面指定位置</title> <link rel="stylesheet" type="text/css" href=
-
Vue滚动页面到指定位置的实现及避坑
目录 Vue滚动页面到指定位置 方法1 方法2 方法3 避坑指南 滚动页面到一定距离后固定 Vue滚动页面到指定位置 在Vue中,有三种方式可以实现H5页面滑动至指定位置 方法1 //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= targ
-
Angular 利用路由跳转到指定页面的指定位置方法
之前做过页面内的跳转,比较简单,最近项目需要实现跨页面跳转,并跳转到指定地点,试了很多方法,有用到传递参数然后让页面滚动相应的距离,但是一旦文章长短发生变化,滚动的距离也需要重新计算,比较麻烦,所以最后总结出这两种比较靠谱的方法,只需要在需要跳转的地方加上合适的id就行,原理和单页面内跳转相似. detail.component.html <p>You'll see which payment methods are available to you on the checkout page,
-
jQuery实现将div中滚动条滚动到指定位置的方法
本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div
-
jQuery使用hide方法隐藏页面上指定元素的方法
本文实例讲述了jQuery使用hide方法隐藏页面上指定元素的方法.分享给大家供大家参考.具体如下: 下面的JS代码隐藏了网页中所有<p>标签的内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button&qu
-
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行 先上一段 页面获取参数的 通用js 复制代码 代码如下: //根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var par
-
Android GridView实现滚动到指定位置的方法
当一个列表项目很多,并且每个项目可以进入到其它Activity或者Fragment时,保存之前列表的位置是一个比较不错的功能, 今天研究了一下怎么保存浏览位置,发现GridView和它的父类中有4个相关的方法: 复制代码 代码如下: public void smoothScrollToPosition (int position) 滚动到position指定的位置,api level 11之下可用 *当你滚动完后,返回列表,能正常滚动,但是你再次从列表的项目返回后,滚动失效,就是只能滚动一次,我
随机推荐
- 浅谈Linux C语言动态库及静态库
- Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
- Vue 单文件中的数据传递示例
- linux vps服务器进程kswapd0与events/0消耗大量CPU的问题
- java1.5中访问环境变量
- JavaScript程序开发之JS代码放置的位置
- PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
- 浅谈PHP解析URL函数parse_url和parse_str
- 常用的php图片处理类(水印、等比缩放、固定高宽)分享
- 目录,文件操作详谈—PHP
- ASP在SQL Server 2000中新建帐号和权限
- C++ 实现汉诺塔的实例详解
- ReactiveCocoa代码实践之-更多思考
- php图片验证码代码
- 完美解决PHP中的Cannot modify header information 问题
- Python3访问并下载网页内容的方法
- JS简单生成两个数字之间随机数的方法
- SQLServer XML数据的五种基本操作
- 遨游,飞飞,IE,空中网 浏览器无提示关闭方法
- C#实现绘制面形图表的方法详解