新选项卡或窗口中的跨浏览器客户端重定向

发布于 2024-11-29 12:26:23 字数 449 浏览 0 评论 0原文

我们需要一种客户端重定向，我们唯一的选择是：

window.location
window.open
HTTP 301, 302, 303 响应

window.location 没有支持在新选项卡或窗口中打开目标位置。（我认为这与浏览上下文有关）

window.open 在 Chrome 中不起作用，并且似乎依赖于对浏览器进行的某些客户端配置，这使其成为不太有利的选择，因为我们无法控制它。

HTTP 重定向响应不会打开新选项卡或窗口，就像 window.location 一样。

有什么想法吗？

原文

分享到QQ

分享到微博

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

发布评论

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

太傻旳人生 2024-12-06 12:26:23

昨晚玩了几个小时后，今天早上我灵光一现，我刚刚在 FF3、Chrome、IE7 和 IE8 中测试了这个解决方案 - 它有点 hacky，但它在所有情况下都有效。

<html>

  <head>
    <title>Redirect in a new window</title>
    <script type="text/javascript">
      function doIt () {
        var form = document.createElement('form');
        form.action = 'http://www.google.com/';
        form.target = '_blank';
        document.getElementById('hidden_div').appendChild(form);
        form.submit();
      }
    </script>
    <style>
      #hidden_div {
        display: none;
      }
    </style>
  </head>

  <body>
    <div>
      This is my page content<br />
      <a href="http://www.google.com/">This is a link to Google</a>...<br />
      ...and this button will open Google in a new tab or window: <input type="button" value="Click Me!" onclick="doIt();" />
    </div>
    <div id="hidden_div"></div>
  </body>

</html>

它是如何工作的

你需要在页面上的某处隐藏一个

，你可以在 JS 中引用它（没什么大不了的 - 只需使用 display: none 创建一个即可）。

当您想要进行重定向时，请使用 document.createElement () 创建一个新的

元素，将其 action 属性指定为您想要获取的页面地址用户，并给它一个适当的 target 属性（我在上面的示例中使用了 _blank）。然后只需将其附加到隐藏的

并调用它的 submit() 方法即可。

嘿，很快，您的重定向将在新窗口/选项卡中打开！

不幸的是，您仍然受到用户如何配置浏览器来处理 target="_blank" 的影响，但它将是一个新窗口或一个新选项卡，并且它应该在任何地方都可以工作......

After playing around with this for hours last night, I had a flash of inspiration this morning, and I have just tested this solution in FF3, Chrome, IE7 and IE8 - it's a bit hacky but it works in all.

<html>

  <head>
    <title>Redirect in a new window</title>
    <script type="text/javascript">
      function doIt () {
        var form = document.createElement('form');
        form.action = 'http://www.google.com/';
        form.target = '_blank';
        document.getElementById('hidden_div').appendChild(form);
        form.submit();
      }
    </script>
    <style>
      #hidden_div {
        display: none;
      }
    </style>
  </head>

  <body>
    <div>
      This is my page content<br />
      <a href="http://www.google.com/">This is a link to Google</a>...<br />
      ...and this button will open Google in a new tab or window: <input type="button" value="Click Me!" onclick="doIt();" />
    </div>
    <div id="hidden_div"></div>
  </body>

</html>

How It Works

You need a hidden <div> on your page somewhere that you can get a reference to in JS (no big deal - just create one with display: none).

When you want to do the redirect, use document.createElement() to create a new <form> element, assign it's action attribute with the address of the page where you want to take the user, and give it a target attribute as appropriate (I have used _blank in my example above). Then simply append it to your hidden <div> and call it's submit() method.

Hey presto, your redirect opens in a new window/tab!

Unfortunately you are still at the mercy of how the user configures their browser to handle target="_blank" but it will be either a new window or a new tab, and it should work everywhere...

回复收藏 0 原文

~没有更多了~