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 ...
随机推荐
- 在 Bootstraptable 插件基础上新增可编辑行
http://www.tuicool.com/articles/YbEVv2v 为什么调用 bootstraptable 原生方法会有问题 首先我必须肯定, bootstraptable 是一款很强大 ...
- Struts2 + Hibernate3.3 开发简单的登录注册功能【J2EE】
开发环境: IDE:Myeclipse10.0 数据库:Oracle(SQL Developer) Web容器:Tomcat 7.0 JDK:1.6 Struts:2.0 Hibernate:3.3 ...
- 如何判断图中存环（正&负）
1.正环 用 SPFA不断的进行松弛操作,发现当前金额可以比本身大就更新,同时记录更新次数.如果更新次数超过n次,说明存在”正“环. 2.负环 这里先说明下负环.(求最短距离的时候) 在我们用SPFA ...
- ZUFEOJ 2147 07染色带谜题
2147: 07染色带谜题 时间限制: 1 Sec 内存限制: 128 MB提交: 170 解决: 21[提交][状态][讨论版][Edit] [TestData] 题目描述 现在给你一个长为N的 ...
- 解决PHPExcel长数字串显示为科学计数
在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号. 使用PHPExcel来生成excel,也会遇到同 ...
- luogu P1002 过河卒
题目描述 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒”. ...
- JZYZOJ1530 [haoi2013]开关控制 状压 dfs 折半搜索
http://172.20.6.3/Problem_Show.asp?id=1530 元宵节快要到了,某城市人民公园将举办一次灯展.Dr.Kong准备设计出一个奇妙的展品,他计划将编号为1到N的N(1 ...
- （原创）Stanford Machine Learning (by Andrew NG) --- (week 4) Neural Networks Representation
Andrew NG的Machine learning课程地址为:https://www.coursera.org/course/ml 神经网络一直被认为是比较难懂的问题,NG将神经网络部分的课程分为了 ...
- 找出最小元素 Exercise07_09
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出最小元素 * */ public class Exercise07_0 ...
- 使 PHP 写的网站看上去像 asp 页面
# 使 PHP 代码看上去像 asp 页面 更改Apache 的httpd.conf中AddType application/x-httpd-php .php .phtml改为 AddType app ...