Как заменить все ссылки <a href="..."> на ссылку JavaScript window.location для использования в веб-приложении?

Question

Я создаю Progressive Web App для iOS, и всякий раз, когда я нажимаю на ссылку, она открывается в Safari, а не в приложении. Я бы хотел использовать JavaScript для замены всех <a href="https://example.com">Example</a> ссылками JavaScript window.location, чтобы ссылки открывались в приложении (например: <a href="javascript:void" onclick="window.location='http://example.com'">Example</a>). Я хотел бы избежать использования jQuery, так как он добавляет в мое приложение дополнительный раздув, и я пытаюсь сохранить минимальный пользовательский опыт.

Спасибо!

Answer 1

Подобная модификация DOM (объектной модели документа) может вызвать больше проблем, чем найти решение, которое вы хотите. Я рекомендую использовать прослушиватель событий и protectDefault.

Вот соответствующие документы по этим методам:

• addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
• protectDefault: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

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

<code><pre>
  <a href="https://example.com/Link_1">Link 1</a>
  <a href="https://example.com/Link_2">Link 2</a>
  <a href="https://example.com/Link_3">Link 3</a>
  <a href="https://example.com/Link_4">Link 4</a>
  <a href="https://example.com/Link_5">Link 5</a>

// Массив элементов anchor (a). const links = document.getElementsByTagName ('a'); // Цикл массива // Да, вы можете использовать foreach или что угодно for (var i = 0; i