【问题标题】:In JavaScript, how can I open a page in a new browser window and scroll to a specific position?在 JavaScript 中,如何在新的浏览器窗口中打开页面并滚动到特定位置?
【发布时间】:2011-05-18 19:20:26
【问题描述】:

为什么下面的JavaScript 脚本会打开一个新窗口,但无法向下滚动页面? (请注意,我在 Firefox 4 的 Web 控制台中运行了此脚本。)

w=window.open("http://stackoverflow.com");w.scrollTo(0,150);

如何在新的浏览器窗口中打开页面并指示该窗口滚动到特定位置?

【问题讨论】:

    标签: javascript browser scroll


    【解决方案1】:

    我发现了一些有趣的东西......

    我一直都知道您可以滚动到一个有名字的锚点——事实上,我们都是这样学习的。但我只是尝试滚动到一个带有 id 的 div 并且成功了!

    因此,例如,如果目标页面有一个 id="bobo" 的 div,那么链接 http://www.example.com/index.php/home#bobo 就对我有用。

    也许这是我的古怪行为。如果可能的话,我觉得我以前会听说过这个。但我所知道的是,我正试图做同样的事情,无论出于何种原因,它都在起作用。

    FWIW,我使用的链接是http://www.religionnews.com/index.php?/rnsblog#blog

    【讨论】:

      【解决方案2】:

      如果您拥有这两个域,则可以使用 window.postMessage 将滚动位置传达给另一个窗口。
      在一个页面中创建 postMessage,在另一个页面中添加事件侦听器。

      如果需要支持旧版浏览器,可以使用window.name在windows之间传输一些数据。

      如果您不拥有这两个域,那么您就不走运了,因为SOP。 它是浏览器的内置保护,可避免跨域滥用。

      【讨论】:

      • 在窗口上下文之外运行的脚本是否属于相同的安全限制?例如,Firefox 的会话管理器扩展可以在新选项卡中打开页面并滚动到该页面中的任意位置。
      • 我不认为浏览器扩展在一个域下,你在本地安装它们就可以了。
      【解决方案3】:

      您正试图在窗口准备好之前滚动。请注意以下工作:

      w=window.open("http://stackoverflow.com");
      setTimeout(function() { w.scrollTo(0,150) }, 1000);
      

      最好在 w.onload 或 DOM 就绪函数中执行滚动,但我似乎无法让它工作。

      【讨论】:

      • 这对我也不起作用。如果我不设置超时,而是在调用w.scrollTo() 之前等待几秒钟,它也不起作用。浏览器报错,“错误:访问属性'scrollTo'的权限被拒绝”。
      • 有趣,它适用于我的 Chrome。我将在 FF 中进行更多测试。
      • 虽然这篇文章已经超过六年了,leftontheweb.com/message/… 可以解释为什么这不起作用。如何绕过这种跨域安全性进行无害操作,例如滚动?
      • 这里引用了另一个由于跨域安全导致的错误:webdeveloper.com/forum/showthread.php?t=189515
      【解决方案4】:

      该脚本无法运行,因为它违反了跨域安全性。请参阅 thisthis。 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】:

        最初回答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>
        

        【讨论】:

          【解决方案6】:

          Derek 关于阻止您执行此操作的跨域安全性是正确的。所以一个答案是通过加载 chrome 来禁用域安全: Chrome --disable-web-security 这来自这个 chrome 实例,运行你的 javascript。子窗口将继承负载开关,您的 scrollTo 现在可以工作了。

          【讨论】:

          • 翻译:“在关闭网络安全的情况下加载 Chrome。”首先,OP 说他在 Firefox 中运行。其次,他不是在问如何进行测试——他是在问如何在面向客户的网站上使用它(假设);如果客户端没有 Chrome 怎么办?更好的是,为什么在禁用网络安全的客户端计算机上启动 Chrome 是个好主意?此外,是否有可能从 javascript 启动 Chrome 实例(设置或不设置该标志)?
          猜你喜欢
          • 1970-01-01
          • 2020-01-27
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-12-26
          • 1970-01-01
          • 1970-01-01
          • 2014-08-29
          相关资源
          最近更新 更多