iframe中,页面转换后回到页面的顶部
看到网上有这样描述的:
现在A页面内分为上下两个部分,上部分是top,下部分分左右,左是treeview右边是iframe,iframe内嵌一个B页面,B页面的内容实质上是个月刊,可以理解为杂志,里面有很多转向到其他页面的连接,问题来了。
如果现在我浏览A页面很长,浏览器滚动条在中间,当我点击B页面的某个连接时,iframe内的页面变了,但是A页面整体无变化,这时滚动条还是在中间的部位,造成的为题就是我看到的iframe里面的内容不是文章的头部,而有可能是直接看到中间部位甚至是尾部(因为我的iframe自适应高度,当文章高度低于iframe高度时他是会收缩的自然的浏览器也就在文章最底部了)。
①首先页面的首页是这样的:

②然后点击左下部分的“more”按钮,应该展示这样的页面效果,如下:

③但是实际上,展示的页面效果是这样的,如下:

(1)有一个主页面A,A中嵌入一个iframe框架B,如下:
<body>
<div class="main_body">
<!--logo-->
<img class="logo" src="static/images/logo2.png" alt="江苏分中心">
<!--menu-->
<div class="main-menu">
<a href="#" name="link" class="current" onclick="opIframePage(this,'home');">0</a>
<a href="#" name="link" id="news" onclick="opIframePage(this,'news');">1</a>
<a href="#" name="link" onclick="opIframePage(this,'train');">2</a>
<a href="#" name="link" onclick="opIframePage(this,'auth');">3</a>
<a href="#" style="background: orange; color:#fff;" onclick="regist();">4</a>
</div>
<div>
<iframe id="iframePage" style="width: 100%;height: 1000px;overflow-y:scroll;" frameborder="0"> </iframe>
</div>
<footer>
<p>fgd</p>
</footer>
</div>
</body>
打开iframe中的页面:document.getElementById("iframePage").src =url;
(2)如果我打开的B页面后,主体页面位于中部或者底部,这就不符合用户的习惯了
如何改变?
方法一:在父页面做手脚:
function topTo(){
document.getElementById(‘iframePage’).scrollIntoView();
}
其中iframePage是你要定位在页面顶部的元素id,然后在子页面中调用父级页面的方法,parent.topTo();
方法二:直接在子页面中写方法:parent.scrollTo(0,0);
这样就可以显示②步的效果了。
iframe中,页面转换后回到页面的顶部的更多相关文章
- iframe中,重新加载页面
比如在iframe中的页面,设置一个onclick事件的触发函数flush function flush(){ window.location.reload(); }
- js控制刷新后回到页面原来位置
1.document.location.reload(); 2.http://www.jb51.net/article/99749.htm
- JS刷新后回到页面顶部
window.location.href = location.href; 方法一: $(window).scrollTop(0); 方法二:$('html ,body').animate({ scr ...
- 转---在ASP.NET MVC中实现登录后回到原先的界面
有这样的一个需求:提交表单,如果用户没有登录,就跳转到登录页,登录后,跳转到原先表单提交这个页面,而且需要保持提交表单界面的数据. 提交表单的页面是一个强类型视图页,如果不考虑需要保持提交表单界面的数 ...
- 在ASP.NET MVC中实现登录后回到原先的界面
有这样的一个需求:提交表单,如果用户没有登录,就跳转到登录页,登录后,跳转到原先表单提交这个页面,而且需要保持提交表单界面的数据. 提交表单的页面是一个强类型视图页,如果不考虑需要保持提交表单界面的数 ...
- vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息
可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent ...
- fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)
FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...
- 移动端H5页面返回并且刷新页面(BFcache)
项目中的需求:点击浏览器中的返回按钮,要让页面重新加载资源.因为这部分的资源每次去加载的内容都不一样,如果返回的时候,还是看到原先的内容,那做这个内容块的意义就很小了:而如果用户看完了这部分内容,再返 ...
- session失效刷新后登录页面嵌入在iframe中的前台解决办法
在前台登录页面中加入JS代码,判断登录页面是否在iframe中,在iframe中就跳转出去 例: //判断是否在iframe中,在里面就跳出去 if (top.location.href != loc ...
随机推荐
- Thinkphp命名规范
1.类文件都是以.class.php为后缀(这里是指的ThinkPHP内部使用的类库文件,不代表外部加载的类库文件),使用驼峰法命名,并且首字母大写,例如 DbMysql.class.php: 2.类 ...
- SPOJ11469 Subset(折半枚举)
题意 给定一个集合,有多少个非空子集,能划分成和相等的两份.\(n\leq 20\) 题解 看到这个题,首先能想到的是\(3^n\)的暴力枚举,枚举当前元素是放入左边还是放入右边或者根本不放,但是显然 ...
- Jenkins实现CI(Continuous Integration)到CD(Continuous Delivery)
Pipeline as Code是2.0的精髓所在,是帮助Jenkins实现CI(Continuous Integration)到CD(Continuous Delivery)华丽转身的关键推手.所谓 ...
- Codeforces 550 D. Regular Bridge
\(>Codeforces \space 550 D. Regular Bridge<\) 题目大意 :给出 \(k\) ,让你构造出一张点和边都不超过 \(10^6\) 的无向图,使得每 ...
- SD 一轮集训 day4 圣城鼠
非常强的构造题. 很显然的是我们要构造一个类似菊花图的东西,因为这样的话两点之间路径的点数会非常少,很容易满足第二个条件. 但是因为直接菊花图的话会不满足第一个条件,,,所以我们可以构造一个类菊花图. ...
- [UOJ407]Werewolf
题意:给一个无向图和一些询问$(S,E,L,R)$,问能否实现:从$S$出发,经过一些编号$\geq L$的节点后再通过编号$\leq R$的节点到达$E$ 先对每条边$(x,y)$以$\max(x, ...
- [bzoj1009](HNOI2008)GT考试 (kmp+矩阵快速幂加速递推)
Description 阿 申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学 A1A2...Am(0&l ...
- centos下防火墙iptables日志学习笔记
一直找不到日志方面怎么弄,问了同事,同事给了个网址: http://www.thegeekstuff.com/2012/08/iptables-log-packets/ 下面就是我根据这个网址里面的设 ...
- Java并发包之闭锁/栅栏/信号量(转)
本文转自http://blog.csdn.net/u010942020/article/details/79352560 感谢作者 一.Java多线程总结: 描述线程的类:Runable和Thread ...
- FIREDAC用于LINUX报头文件FireDAC.VCLUI.Wait找不到
FIREDAC用于LINUX报头文件FireDAC.VCLUI.Wait找不到 FIREDAC LINUX下面,此控件 此属性 必须设为CONSOLE. 默认值只能用于WINDOWS操作系统.