Кросс-браузерное перенаправление на стороне клиента в новой вкладке или окне - PullRequest
2 голосов
/ 16 августа 2011

нам нужно своего рода перенаправление на стороне клиента, и у нас есть только следующие варианты:

  1. window.location
  2. window.open
  3. HTTP 301, 302, 303 ответа

window.location не поддерживает открытие целевого местоположения в новой вкладке или окне. (Я думаю, что это связано с контекстом просмотра )

window.open не работает в Chrome и, по-видимому, зависит от некоторых настроек на стороне клиента, сделанных в браузере, что делает его менее выгодным вариантом, так как у нас нет контроля над ним.

HTTP-ответ перенаправления не открывает новую вкладку или окно, как window.location.

Есть идеи?

1 Ответ

4 голосов
/ 17 августа 2011

Проиграв с этим часами вчера вечером, сегодня утром у меня появилась вспышка вдохновения, и я только что проверил это решение в FF3, Chrome, IE7 и IE8 - оно немного хакерское, но оно работает во всех.

<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>

Как это работает

Вам нужен скрытый <div> на вашей странице, где вы можете получить ссылку в JS (нет ничего сложного - просто создайте его с помощью display: none).

Если вы хотите выполнить перенаправление, используйте document.createElement() для создания нового элемента <form>, присвойте его атрибуту action адрес страницы, на которой вы находитесьхочу взять пользователя и присвоить ему атрибут target в зависимости от ситуации (я использовал _blank в моем примере выше).Затем просто добавьте его к скрытому <div> и назовите его submit() методом.

Эй, presto, твой редирект открывается в новом окне / вкладке!

К сожалению, ты все еще в милостио том, как пользователь настраивает свой браузер для обработки target="_blank", но это будет либо новое окно, либо новая вкладка, и оно должно работать везде ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...