【发布时间】:2011-05-18 19:20:26
【问题描述】:
为什么下面的JavaScript 脚本会打开一个新窗口,但无法向下滚动页面? (请注意,我在 Firefox 4 的 Web 控制台中运行了此脚本。)
w=window.open("http://stackoverflow.com");w.scrollTo(0,150);
如何在新的浏览器窗口中打开页面并指示该窗口滚动到特定位置?
【问题讨论】:
标签: javascript browser scroll
为什么下面的JavaScript 脚本会打开一个新窗口,但无法向下滚动页面? (请注意,我在 Firefox 4 的 Web 控制台中运行了此脚本。)
w=window.open("http://stackoverflow.com");w.scrollTo(0,150);
如何在新的浏览器窗口中打开页面并指示该窗口滚动到特定位置?
【问题讨论】:
标签: javascript browser scroll
我发现了一些有趣的东西......
我一直都知道您可以滚动到一个有名字的锚点——事实上,我们都是这样学习的。但我只是尝试滚动到一个带有 id 的 div 并且成功了!
因此,例如,如果目标页面有一个 id="bobo" 的 div,那么链接 http://www.example.com/index.php/home#bobo 就对我有用。
也许这是我的古怪行为。如果可能的话,我觉得我以前会听说过这个。但我所知道的是,我正试图做同样的事情,无论出于何种原因,它都在起作用。
FWIW,我使用的链接是http://www.religionnews.com/index.php?/rnsblog#blog
【讨论】:
如果您拥有这两个域,则可以使用 window.postMessage 将滚动位置传达给另一个窗口。
在一个页面中创建 postMessage,在另一个页面中添加事件侦听器。
如果需要支持旧版浏览器,可以使用window.name在windows之间传输一些数据。
如果您不拥有这两个域,那么您就不走运了,因为SOP。 它是浏览器的内置保护,可避免跨域滥用。
【讨论】:
您正试图在窗口准备好之前滚动。请注意以下工作:
w=window.open("http://stackoverflow.com");
setTimeout(function() { w.scrollTo(0,150) }, 1000);
最好在 w.onload 或 DOM 就绪函数中执行滚动,但我似乎无法让它工作。
【讨论】:
w.scrollTo() 之前等待几秒钟,它也不起作用。浏览器报错,“错误:访问属性'scrollTo'的权限被拒绝”。
该脚本无法运行,因为它违反了跨域安全性。请参阅 this 和 this。 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'
【讨论】:
最初回答here,有一个hack,如果页面支持iframe嵌入,您可以打开一个嵌入页面的文档,然后滚动文档而不是嵌入页面。问题是我们无法获取页面的高度,因此我们只是劫持了滚动事件,以便在接近底部时使文档更高:
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>
【讨论】:
Derek 关于阻止您执行此操作的跨域安全性是正确的。所以一个答案是通过加载 chrome 来禁用域安全: Chrome --disable-web-security 这来自这个 chrome 实例,运行你的 javascript。子窗口将继承负载开关,您的 scrollTo 现在可以工作了。
【讨论】: