как остановить обновление родительской страницы при открытии дочернего windows?

когда я нажимаю ссылку для открытия дочернего windows, автоматически обновляется родительская страница. как я могу остановить его?

родительская страница не должна обновляться при открытии дочернего windows. как это сделать? пожалуйста помогите.

мой код приведен ниже:

  login   var popup; function ShowPopup(url) { if(popup) { popup.close(); } popup = window.open(url, "self", "toolbar=no,scrollbars=yes,location=no,statusbar=no,menubar=no,resizable=0,width=300,height=350,left = 0,top = 0"); popup.focus(); }    Sign In / Register   

Ваша страница обновляется, потому что вызвана не только ваша функция, но и гиперссылка, обозначенная тегом a . Таким образом, у вас одновременно есть две вещи:

  • сама гиперссылка переходит к тому, что находится в атрибуте href , даже если оно пустое. Если href пуст, это означает: перезагрузите эту страницу.
  • обработчик события onclick также делает что-то (открытие всплывающего windows), но в настоящее время он не отменяет первый эффект.

В первой реакции можно просто удалить оскорбительный атрибут href . Это решает проблему, но вводит другую: вы теряете весь красивый стиль отображаемого текста гиперссылки (например, подчеркивание, цвет, изменение курсора, порядок вкладок, …), что обычно не то, что вы хотите.

Вот еще несколько удобных решений:

Пусть обработчик события onclick возвращает false

Возврат false отменяет поведение якоря по умолчанию, и содержимое атрибута href будет проигнорировано:

 onclick="ShowPopup('popup_login.asp'); return false;" 

Если вам небезразличны браузеры, которые не поддерживают javascript (или отключили его), тогда поместите осмысленный обратный urlurl в атрибуте href , например:

 href="https://stackoverflow.com/questions/33460296/how-to-stop-refreshing-parent-page-while-child-window-open/javascript_is_required.html" 

Использовать event.preventDefault

Это альтернатива return false . Это имеет то преимущество, что вы можете заставить его выполнить в качестве первой инструкции, так что, если во втором случае возникает ошибка времени выполнения, она уже выполнила свою работу:

 onclick="event.preventDefault();ShowPopup('popup_login.asp');" 

Обратите внимание, что этот объект event определяется всеми браузерами в контексте атрибутов событий и должен отличаться от объекта window.event , который не поддерживается всеми браузерами.

Использовать хеш-запись в href

Дайте привязке имя, а затем укажите это имя в атрибуте href . Таким образом, якорь будет ориентироваться в представлении, которое обычно уже происходит, когда пользователь щелкнул по нему:

 name="loginlink" href="#loginlink" 

Вы будете часто видеть более короткую вариацию href="#" , но это будет прокручивать страницу вверху при нажатии, что может быть ОК, если вы точно знаете, что страница не прокручена вниз. Тем не менее, использование «#» имеет побочный эффект: при нажатии изменится url и предыдущий url помещается в стек истории браузера. Поэтому, если после нажатия ссылки вы нажмете кнопку «Назад», вы останетесь на странице. Это может быть нежелательным.

Использовать протокол javascript: ничего не делать

 href="javascript:" 

Это заставит гиперссылку выполнить любой javascript после двоеточия, и поскольку там их нет, ничего не произойдет. История браузера не изменяется. Существуют вариации этого метода, такие как javascript: return false; или javascript: void(0);

Используйте протокол javascript: для обработки события click

С помощью этого решения вы больше не используете атрибут onclick . Вместо этого вы переместите код в атрибут href :

 href="javascript: ShowPopup('popup_login.asp');" 

Разделение планировки и кода

В исходном коде и во всех вышеперечисленных решениях все еще есть проблема, которую не нравится многим разработчикам: HTML смешан с кодом javascript . Лучше разделить эти два.

Это можно сделать следующим образом:

  ...  ...  

Некоторые скажут, что это также имеет нижнюю сторону: сложнее определить код, который выполняется при щелчке. Вышеприведенный код присоединяет обработчик события к событию click элемента mylink. Обязательно выполняйте его только после загрузки документа. Обработчик событий отменяет поведение кликов по умолчанию двумя способами. Выберите тот, который вы предпочитаете, или оба, если хотите. Поскольку это отменено, переход к значению атрибута href никогда не выполняется. Первая строка касается особенностей браузера, поскольку более старые браузеры IE не передают объект события в качестве аргумента обработчику событий, а вместо этого выставляют объект глобального event .

Если вам не нужно поддерживать браузеры до IE9, вы можете улучшить их с помощью addEventListener('click', myfunction); вместо onclick = myfunction; в приведенном выше коде. У этого есть много преимуществ: больше обработчиков событий могут быть присоединены к одному и тому же событию, и вы также можете удалить их один за другим. jQuery предлагает хорошую поддержку кросс-браузера для этого с помощью .on () .

В приведенных выше решениях есть несколько вариантов, все с их преимуществами и недостатками. Вы можете даже отступить от использования якоря для этой цели и использовать другой элемент вместо этого с добавлением стиля.

Write return false(); после window.open() JS.

Если вышеуказанный fragment не работает, измените по умолчанию на обычный тег с type="button" . Это решит проблему.

Ниже приведен fragment кода:

JavaScript

  

Просто добавление type="button" в . Я знаю, что это избыточно, но это сработало!

Из этого:

  

К этому: