Javascript弹出滚动跳转

时间:2011-08-02 19:59:09

标签: javascript html popup

当然有一种简单的方法可以做到这一点。我需要在java脚本弹出窗口中加载页面。但是我需要在窗口中显示的内容是一种向下的方式。有没有办法跳转到页面的那一部分? (所以跳转到垂直滚动坐标?)(另外,我无法编辑正在显示的页面。仅仅链接到它)

非常感谢任何帮助!

3 个答案:

答案 0 :(得分:3)

最简单的方法是通过在url中的哈希后附加其id来链接到页面上的元素。即,在打开弹出窗口时,

window.open('pagename.html#element-to-show','mywindow','width=400,height=200')

其中“element-to-show”是页面下方元素的id。

答案 1 :(得分:1)

使用HTML锚点并在弹出窗口中加载page.html#myanchor(而不仅仅是page.html)。

http://www.w3.org/TR/html4/struct/links.html

答案 2 :(得分:0)

假设您无法链接到锚点,但加载到弹出窗口的页面位于同一个域中,您可以使用以下内容:

  1. 加载弹出窗口
  2. 设置onload事件以使弹出窗口在加载后滚动
  3. 弹出的页面将在加载后向下滚动
  4. 您可能想要自定义此内容,例如你可以为openInPopUp()提供一个额外的参数,其中包含要滚动到的确切位置。

    以下是The Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
        <head>
    
            <script language="javascript" type="text/javascript">
              function openInPopUp(link) {
                // (1) load the popup
                newwindow = window.open(link.href, 'name', 'height=300,width=200,resizable=1,scrollbars=1');
    
                // (2) set the onload event
                newwindow.onload = function() {
                    scrollDown();
                };
    
                return false;
              }
    
              function scrollDown(){
                // (3) scroll down
                newwindow.scrollTo(0, 200);
              }
            </script>
            <title></title>
        </head>
        <body>
            <p>
                <a href="popup.html" onclick="return openInPopUp(this)">open link to popup and scroll down</a>
                <br/><br/>
    
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br/>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br/>
    
            </p>
        </body>
    </html>
    

    如果您要从其他域加载内容而不是调用页面,则这将无效,但以权限错误结束。

    Details for the scrollTo function

相关问题