Question

有一个使用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

Answer 1

在我的评论之后，这是显示问题的摘要（单击第二个按钮以查看问题）：

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上下文。

但这绝对是一个：您应该尝试将函数绑定到已创建的按钮，然后查看它是否有效。

如何在Angular Service Worker网页中外部注入新链接并单击它，而不重新加载整个页面？

1 个答案: