logo标签列表

JavaScript弹出式滚动跳转

javascripthtmlpopup
4
当然有一种简单的方法来实现这个。我需要在一个JavaScript弹出窗口中加载一个页面，但我需要显示在该窗口中的内容在页面中有些偏下。有没有一种方法可以跳转到页面的那个部分？（所以跳转到垂直滚动坐标？）（另外，我无法编辑正在显示的页面。只能编辑链接）
非常感谢任何帮助！
我缺少一些细节。链接的页面是否在同一个域内？您可以链接到锚点/ ID，如一些用户所回答的那样，还是要滚动一定数量的像素？ - Martin Schlagnitweit
3个回答
3

最简单的方法是在URL中加上其ID后缀来链接页面上的元素。例如，在打开弹出窗口时，可以这样做：

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

"element-to-show"是页面下方元素的id。

1
0

假设您无法链接到锚点，但是弹出窗口加载的页面与同一域中的页面相同，则可以使用以下方法：

  1. 加载弹出窗口
  2. 为弹出窗口设置onload事件，在加载完成后滚动
  3. 弹出的页面将在加载完成后向下滚动

您可能希望自定义此功能，例如，您可以提供一个附加参数以打开openInPopUp()并滚动到精确位置。

以下是代码：

<!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>

如果您想从另一个域加载内容，而不是调用页面，则此方法将无法正常工作，而会出现权限错误。

scrollTo函数的详细信息

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接