在 JavaScript 中，如何在新的浏览器窗口中打开页面并滚动到特定位置？
[英]In JavaScript, how can I open a page in a new browser window and scroll to a specific position?
问题描述
Why does the following JavaScript script open a new window, but fails to scroll down the page?
为什么以下JavaScript脚本打开一个新窗口，但无法向下滚动页面？ (Note that I ran this script in the Web Console in Firefox 4.) （请注意，我在 Firefox 4 的 Web 控制台中运行了此脚本。）
w=window.open("http://stackoverflow.com");w.scrollTo(0,150);
How can I open a page in a new browser window and instruct that window to scroll to a specific position?如何在新的浏览器窗口中打开页面并指示该窗口滚动到特定位置？
6 个解决方案
解决方案1
7 2011-10-27 10:09:53
I found something interesting on this...我发现了一些有趣的事情......
I've always known you can scroll to an anchor with a name -- in fact, that's the way we were all taught.我一直都知道你可以滚动到一个带有名字的锚点——事实上，这就是我们都被教导的方式。 But I just tried to scroll to a div with an id and it worked!但我只是试图滚动到一个带有 id 的 div 并且它起作用了！
So, for example, if the target page has a div with id="bobo" then the link http://www.example.com/index.php/home#bobo just worked for me.因此，例如，如果目标页面有一个 id="bobo" 的 div，那么链接http://www.example.com/index.php/home#bobo就对我有用。
Perhaps it's flaky behavior on my end.也许这是我最后的不稳定行为。 I feel like I would have heard of this before if it were possible.如果可能的话，我觉得我以前会听说过这个。 But all I know is I was trying to do the same thing and for whatever reason it's working.但我所知道的是，我一直在尝试做同样的事情，无论出于何种原因，它都奏效了。
FWIW, the link I'm using is http://www.religionnews.com/index.php?/rnsblog#blog FWIW，我使用的链接是http://www.religionnews.com/index.php?/rnsblog#blog
解决方案2
2 已采纳 2011-05-18 20:21:08
If you own both domains, you can use window.postMessage to communicate the scroll position to the other window.如果您拥有这两个域，则可以使用window.postMessage将滚动位置传达给另一个窗口。
In one page you make the postMessage, and in the other you add an event listener.在一个页面中创建 postMessage，在另一个页面中添加一个事件侦听器。
If you need to support older browsers, you can use window.name to transfer some data between windows.如果需要支持旧版浏览器，可以使用window.name在窗口间传输一些数据。
If you don't own both domains, you're out of luck, due to the SOP .如果您不拥有这两个域，那么您就不走运了，因为SOP 。 It is a built-in protection in browsers to avoid cross domain abuses.它是浏览器中的内置保护，可避免跨域滥用。
解决方案3
1 2011-05-18 19:29:14
You're trying to scroll before the window is ready.您正在尝试在窗口准备好之前滚动。 Notice that the following works:请注意以下工作：
w=window.open("http://stackoverflow.com");
setTimeout(function() { w.scrollTo(0,150) }, 1000);
It would be best to execute the scroll in a w.onload or DOM ready function, but I can't seem to get that to work.最好在w.onload或 DOM 就绪函数中执行滚动，但我似乎无法w.onload工作。
解决方案4
1 2011-05-18 20:29:05
The script does not work because it breaches cross-domain security.该脚本不起作用，因为它违反了跨域安全性。 See this and this .看到这个和这个。 Chrome reports a similar error: Chrome 报了类似的错误：
> w=window.open("http://stackoverflow.com");
DOMWindow
84Unsafe JavaScript attempt to access frame with URL http://stackoverflow.com/ from frame with URL chrome://newtab/. Domains, protocols and ports must match.
> w.scrollTo(0,150);
89Unsafe JavaScript attempt to access frame with URL http://stackoverflow.com/ from frame with URL chrome://newtab/. Domains, protocols and ports must match.
TypeError: Object [object DOMWindow] has no method 'scrollTo'
解决方案5
0 2021-01-24 14:15:35
Originally answered here , there's a hack where if the page supports iframe embedding, you can open a document that embeds the page and then scrolls the document rather than the embedded page.最初在这里回答，如果页面支持 iframe 嵌入，则可以打开一个嵌入页面的文档，然后滚动文档而不是嵌入页面。 The issue is that we can't get the height of the page, so instead we just hijack the scrolling event to make the document taller once we approach the bottom:问题是我们无法获得页面的高度，所以我们只是劫持滚动事件，使文档在接近底部时变得更高：
data:text/html,<html><body style="margin:0; padding:0;"><iframe id='i' src='http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0' width=100% frameborder=0 margin=0 scrolling=no style="height: calc(100vh + 170px + 200px);"></iframe></body><script>window.scrollTo(0, 170);window.onscroll = function(e) {if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {document.getElementById('i').style.height = window.innerHeight + window.scrollY + 200;}};</script></html>
解决方案6
-1 2012-02-23 21:18:34
Derek is correct about the cross-domain security preventing you from doing this.德里克关于跨域安全性阻止您这样做是正确的。 So one answer is to disable the domain security by loading chrome: Chrome --disable-web-security This from THIS chrome instance, run your javascript.因此，一个答案是通过加载 chrome 来禁用域安全性： Chrome --disable-web-security 从这个 chrome 实例中，运行您的 javascript。 The child windows will inherit the load switch and your scrollTo will now work.子窗口将继承负载开关，您的 scrollTo 现在将起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.