• 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=" 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);

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

  • 相关阅读:
    php stdClass转数组
    PHP 获取1970年前的时间戳,且为负
    springboot响应格式Resullt封装
    php使用elasticsearch
    day0620211207
    day0820211209
    day022021121
    day0520211206
    day0720211208
    day0320211202
  • 原文地址:https://www.cnblogs.com/lojun/p/6552425.html
Copyright © 2020-2023  润新知