Javascript弹出滚动跳转

发布于 2024-11-27 17:07:40 字数 138 浏览 1 评论 0原文

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

非常感谢任何帮助!

Surely there is an easy way to do this. I need to load a page in a java script popup window. But the content I need to show in the window are a ways down the page. Is there a way to jump to that part of the page? (So jump to a vertical scroll coordinate?) (Also, I cannot edit the page which is being shown. Merely the link to it)

Any help is much appreciated!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

-黛色若梦 2024-12-04 17:07:41

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

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

其中“要显示的元素”是页面下方元素的 id。

The easiest way would be to link to an element on the page by appending its id after a hash in the url. ie, when openinging your popup,

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

where "element-to-show" is the id of the element that is down the page.

那片花海 2024-12-04 17:07:41

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

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

Use HTML anchors and load page.html#myanchor in the popup (instead of just page.html).

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

好倦 2024-12-04 17:07:41

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

  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 函数的详细信息

Assuming you can't link to anchors but the page you load into the popup is in the same domain you could use something like this:

  1. load the popup
  2. set the onload event for the popup to scroll after it has been loaded
  3. the popped up page will scroll down after it has been loaded

You may want to customize this, e.g. you could provide an additional parameter to openInPopUp() with the exact position to scroll to.

Here's the 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>

If you want to load content from another domain, than the calling page, this won't work but end in a permissions error.

Details for the scrollTo function

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文