看到网上有这样描述的：

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

　　①首先页面的首页是这样的：

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

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

　　(1)有一个主页面A,A中嵌入一个iframe框架B，如下：

  1. <body>
  2. <div class="main_body">
  3.         <!--logo-->
  4.         <img class="logo" src="static/images/logo2.png" alt="江苏分中心">
  5.         <!--menu-->
  6.         <div class="main-menu">
  7.             <a href="#" name="link" class="current" onclick="opIframePage(this,'home');">0</a>
  8.             <a href="#" name="link" id="news" onclick="opIframePage(this,'news');">1</a>
  9.             <a href="#" name="link" onclick="opIframePage(this,'train');">2</a>
  10.             <a href="#" name="link" onclick="opIframePage(this,'auth');">3</a>
  11.             <a href="#" style="background: orange; color:#fff;" onclick="regist();">4</a>
  12.         </div>
  13.         <div>
  14.             <iframe id="iframePage" style="width: 100%;height: 1000px;overflow-y:scroll;" frameborder="0">
  15.  
  16.             </iframe>
  17.         </div>
  18.         <footer>
  19.             <p>fgd</p>
  20.         </footer>
  21.     </div>
  22. </body>

　　打开iframe中的页面：document.getElementById("iframePage").src =url;
　　(2)如果我打开的B页面后，主体页面位于中部或者底部，这就不符合用户的习惯了

　　如何改变？

　　方法一：在父页面做手脚：

  1. function topTo(){
  2. 　　document.getElementById(‘iframePage’).scrollIntoView();
  3. }

　　　　其中iframePage是你要定位在页面顶部的元素id，然后在子页面中调用父级页面的方法，parent.topTo();

　　方法二：直接在子页面中写方法：parent.scrollTo(0,0);

　　　　这样就可以显示②步的效果了。

iframe中，页面转换后回到页面的顶部的更多相关文章

  1. iframe中，重新加载页面

    比如在iframe中的页面,设置一个onclick事件的触发函数flush function flush(){ window.location.reload(); }

  2. js控制刷新后回到页面原来位置

    1.document.location.reload(); 2.http://www.jb51.net/article/99749.htm

  3. JS刷新后回到页面顶部

    window.location.href = location.href; 方法一: $(window).scrollTop(0); 方法二:$('html ,body').animate({ scr ...

  4. 转---在ASP.NET MVC中实现登录后回到原先的界面

    有这样的一个需求:提交表单,如果用户没有登录,就跳转到登录页,登录后,跳转到原先表单提交这个页面,而且需要保持提交表单界面的数据. 提交表单的页面是一个强类型视图页,如果不考虑需要保持提交表单界面的数 ...

  5. 在ASP.NET MVC中实现登录后回到原先的界面

    有这样的一个需求:提交表单,如果用户没有登录,就跳转到登录页,登录后,跳转到原先表单提交这个页面,而且需要保持提交表单界面的数据. 提交表单的页面是一个强类型视图页,如果不考虑需要保持提交表单界面的数 ...

  6. vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息

    可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent ...

  7. fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后，页面上移，点击不了)

    FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...

  8. 移动端H5页面返回并且刷新页面（BFcache）

    项目中的需求:点击浏览器中的返回按钮,要让页面重新加载资源.因为这部分的资源每次去加载的内容都不一样,如果返回的时候,还是看到原先的内容,那做这个内容块的意义就很小了:而如果用户看完了这部分内容,再返 ...

  9. session失效刷新后登录页面嵌入在iframe中的前台解决办法

    在前台登录页面中加入JS代码,判断登录页面是否在iframe中,在iframe中就跳转出去 例: //判断是否在iframe中,在里面就跳出去 if (top.location.href != loc ...

随机推荐

  1. UVa 10562 Undraw the Trees 看图写树

    转载请注明: 仰望高端玩家的小清新 http://www.cnblogs.com/luruiyuan/ 题目大意: 题目传送门:UVa 10562Undraw the Trees 给定字符拼成的树,将 ...

  2. 3000大洋，自己配置i5主机

    自用的HP笔记本已经“七年之痒”了,所以在2016年新年之前,换了台新电脑.主要用来娱乐(电影),但是也要能够满足工作学习(本人从事IT行业)的需要. 遵循本人一贯的高冷装X的习惯,决定自己买配件攒机 ...

  3. Electron与jQuery中$符号冲突的三种解决方法

    在Electron工程中引用jQuery时,经常会出现以下错误: Uncaught ReferenceError: $ is not defined 解决的具体方法如下: ①.在测试的过程中(测试过1 ...

  4. cogs 2039. 树的统计

    2039. 树的统计 ★★   输入文件:counttree.in   输出文件:counttree.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 关于树的统计问题有 ...

  5. 浅谈OI中的提交答案

    在OI中,题目有三类: 传统题 交互题 提交答案题 今天来了解一下第三类 概述 传统题:给你一个题面,你需要交一个程序,评测姬会用你的程序运行你看不到的一些测试点,用输出和正确答案比较 提交答案题:给 ...

  6. 2017 Multi-University Training 2 解题报告

    Is Derek lying? Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  7. hdu 1965 (莫比乌斯函数 莫比乌斯反演）

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. Vue视图下

    3 Vue视图 3.5 样式绑定 class绑定 <p :class='对象'> <p :class="数组"> <p :class="{类 ...

  9. （原创）Stanford Machine Learning (by Andrew NG) --- (week 3) Logistic Regression & Regularization

    coursera上面Andrew NG的Machine learning课程地址为:https://www.coursera.org/course/ml 我曾经使用Logistic Regressio ...

  10. JDK源码学习笔记——Integer

    一.类定义 public final class Integer extends Number implements Comparable<Integer> 二.属性 private fi ...