Как можно внешне добавить новую ссылку на веб-страницу Angular Service Worker и щелкнуть по ней, не перезагружая всю страницу? - PullRequest
Новая
       17

Как можно внешне добавить новую ссылку на веб-страницу Angular Service Worker и щелкнуть по ней, не перезагружая всю страницу?

0 голосов
/ 27 ноября 2018

Существует внешняя страница, использующая Angular Service Worker, в которой все ссылки открываются внутри без перезагрузки всей веб-страницы.

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

Вопрос в том, может ли что-то заставить веб-страницу не перезагружаться при нажатии на эти ссылки и просто обрабатывать их какоригинальные ссылки?

Ссылки, по которым можно щелкнуть без перезагрузки всей страницы, выглядят как <a _ngcontent-c32="" href="/something">Something</a> и используют этот EventListener: 

function(e){if(e=e||t.event){var n=this||e.target||t,r=n[C[e.type][f]];if(r)if(1===r.length)y(r[0],n,e);else for(var i=r.slice(),o=0;o<i.length&&(!e||!0!==e[z]);o++)y(i[o],n,e)}}

Чтобы добавить новую ссылку, вы можете просто открыть консольвведите местоположение и введите <a href="something_else">test</a> или, если хотите, даже <a _ngcontent-c32="" href="something">test</a> или используйте: 

var item = document.createElement("a")
document.querySelector('div').appendChild(item) // Tried many other locations too
item.click() // Why does it reload the entire page? Also if clicked manually

1 Ответ

0 голосов
/ 27 ноября 2018

После моего комментария приведен фрагмент, показывающий проблему (нажмите на вторую кнопку, чтобы увидеть ее): 

const buttons = [...document.querySelectorAll('button')];

buttons.forEach(button => button.addEventListener('click', event => window.alert('Button clicked')));

const newButton = document.createElement('button');
newButton.innerText = 'Click me!';
document.body.appendChild(newButton);
<button>Click me !</button>

Как видите, без привязки прослушивателя событий к недавно добавленной кнопке ничего не происходит.

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

Но это определенно одно: вы должныпопытайтесь связать свою функцию с кнопкой, которую вы создали, и посмотрите, работает ли она.

...