How can I externally inject a new link in an Angular Service Worker webpage and click it without reloading...
There's an external page that uses Angular Service Worker in which all links open internally without reloading the entire webpage.
But when I try to run a script that injects new links, then clicking those links (both manually and through JS) works but causes to reload the entire page, thus cutting off the script.
The question is - Is there something that can force the webpage not to reload when clicking those links and just treat them like the original links?
The links that can be clicked without reloading the entire page look like
<a _ngcontent-c32="" href="/something">Something</a> and use this 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)}}
To inject a new link you can just open the console, enter a location and enter <a href="something_else">test</a> or if you want even <a _ngcontent-c32="" href="something">test</a> or use:
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
angular-service-worker
asked Nov 27 '18 at 12:22
LWCLWC
413422
add a comment |
There's an external page that uses Angular Service Worker in which all links open internally without reloading the entire webpage.
But when I try to run a script that injects new links, then clicking those links (both manually and through JS) works but causes to reload the entire page, thus cutting off the script.
The question is - Is there something that can force the webpage not to reload when clicking those links and just treat them like the original links?
The links that can be clicked without reloading the entire page look like
<a _ngcontent-c32="" href="/something">Something</a> and use this 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)}}
To inject a new link you can just open the console, enter a location and enter <a href="something_else">test</a> or if you want even <a _ngcontent-c32="" href="something">test</a> or use:
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
angular-service-worker
asked Nov 27 '18 at 12:22
LWCLWC
413422
Listeners are attached to an element : they don't listen to events on new elements. Attach the listener to your element, and it should work.
– trichetriche
Nov 27 '18 at 12:23
Can you be sure the listener is the deciding factor on whether to reload the entire webpage or not? If so, how can I detect the listener and then attach it to the new element?
– LWC
Nov 27 '18 at 14:33
As a sidenote to my answer : I don't know how you can attach the function to the button. It seems your function is an anonymous one and doesn't hold a memory reference : If you manage to find a button with this function as a listener, you could probably get the function and tie it to your own link (be sure to useapplyorbindto get the correct context for thethiskeyword). But that is another issue, sorry I can't be of any help on that, I have never tried to dig in minified+uglified code !
– trichetriche
Nov 27 '18 at 14:51
As mentioned in the OP, all of the existing links ('a' elements) already use this listener. But how do I duplicate their listener?
– LWC
Nov 27 '18 at 15:10
add a comment |
There's an external page that uses Angular Service Worker in which all links open internally without reloading the entire webpage.
But when I try to run a script that injects new links, then clicking those links (both manually and through JS) works but causes to reload the entire page, thus cutting off the script.
The question is - Is there something that can force the webpage not to reload when clicking those links and just treat them like the original links?
The links that can be clicked without reloading the entire page look like
<a _ngcontent-c32="" href="/something">Something</a> and use this 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)}}
To inject a new link you can just open the console, enter a location and enter <a href="something_else">test</a> or if you want even <a _ngcontent-c32="" href="something">test</a> or use:
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
angular-service-worker
asked Nov 27 '18 at 12:22
LWCLWC
413422
There's an external page that uses Angular Service Worker in which all links open internally without reloading the entire webpage.
But when I try to run a script that injects new links, then clicking those links (both manually and through JS) works but causes to reload the entire page, thus cutting off the script.
The question is - Is there something that can force the webpage not to reload when clicking those links and just treat them like the original links?
The links that can be clicked without reloading the entire page look like
<a _ngcontent-c32="" href="/something">Something</a> and use this 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)}}
To inject a new link you can just open the console, enter a location and enter <a href="something_else">test</a> or if you want even <a _ngcontent-c32="" href="something">test</a> or use:
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
angular-service-worker
angular-service-worker
asked Nov 27 '18 at 12:22
LWCLWC
413422
asked Nov 27 '18 at 12:22
LWCLWC
413422
edited Nov 28 '18 at 6:50
LWC
asked Nov 27 '18 at 12:22
LWCLWC
413422
asked Nov 27 '18 at 12:22
LWCLWC
413422
asked Nov 27 '18 at 12:22
LWCLWC
413422
413422
Listeners are attached to an element : they don't listen to events on new elements. Attach the listener to your element, and it should work.
– trichetriche
Nov 27 '18 at 12:23
Can you be sure the listener is the deciding factor on whether to reload the entire webpage or not? If so, how can I detect the listener and then attach it to the new element?
– LWC
Nov 27 '18 at 14:33
As a sidenote to my answer : I don't know how you can attach the function to the button. It seems your function is an anonymous one and doesn't hold a memory reference : If you manage to find a button with this function as a listener, you could probably get the function and tie it to your own link (be sure to useapplyorbindto get the correct context for thethiskeyword). But that is another issue, sorry I can't be of any help on that, I have never tried to dig in minified+uglified code !
– trichetriche
Nov 27 '18 at 14:51
As mentioned in the OP, all of the existing links ('a' elements) already use this listener. But how do I duplicate their listener?
– LWC
Nov 27 '18 at 15:10
add a comment |
Listeners are attached to an element : they don't listen to events on new elements. Attach the listener to your element, and it should work.
– trichetriche
Nov 27 '18 at 12:23
Can you be sure the listener is the deciding factor on whether to reload the entire webpage or not? If so, how can I detect the listener and then attach it to the new element?
– LWC
Nov 27 '18 at 14:33
As a sidenote to my answer : I don't know how you can attach the function to the button. It seems your function is an anonymous one and doesn't hold a memory reference : If you manage to find a button with this function as a listener, you could probably get the function and tie it to your own link (be sure to useapplyorbindto get the correct context for thethiskeyword). But that is another issue, sorry I can't be of any help on that, I have never tried to dig in minified+uglified code !
– trichetriche
Nov 27 '18 at 14:51
As mentioned in the OP, all of the existing links ('a' elements) already use this listener. But how do I duplicate their listener?
– LWC
Nov 27 '18 at 15:10
Listeners are attached to an element : they don't listen to events on new elements. Attach the listener to your element, and it should work.
– trichetriche
Nov 27 '18 at 12:23
Listeners are attached to an element : they don't listen to events on new elements. Attach the listener to your element, and it should work.
– trichetriche
Nov 27 '18 at 12:23
Can you be sure the listener is the deciding factor on whether to reload the entire webpage or not? If so, how can I detect the listener and then attach it to the new element?
– LWC
Nov 27 '18 at 14:33
Can you be sure the listener is the deciding factor on whether to reload the entire webpage or not? If so, how can I detect the listener and then attach it to the new element?
– LWC
Nov 27 '18 at 14:33
As a sidenote to my answer : I don't know how you can attach the function to the button. It seems your function is an anonymous one and doesn't hold a memory reference : If you manage to find a button with this function as a listener, you could probably get the function and tie it to your own link (be sure to use
apply or bind to get the correct context for the this keyword). But that is another issue, sorry I can't be of any help on that, I have never tried to dig in minified+uglified code !– trichetriche
Nov 27 '18 at 14:51
As a sidenote to my answer : I don't know how you can attach the function to the button. It seems your function is an anonymous one and doesn't hold a memory reference : If you manage to find a button with this function as a listener, you could probably get the function and tie it to your own link (be sure to use
apply or bind to get the correct context for the this keyword). But that is another issue, sorry I can't be of any help on that, I have never tried to dig in minified+uglified code !– trichetriche
Nov 27 '18 at 14:51
As mentioned in the OP, all of the existing links ('a' elements) already use this listener. But how do I duplicate their listener?
– LWC
Nov 27 '18 at 15:10
As mentioned in the OP, all of the existing links ('a' elements) already use this listener. But how do I duplicate their listener?
– LWC
Nov 27 '18 at 15:10
add a comment |
1 Answer
1
active
oldest
votes
Following my comment, here is a snippet showing the issue (click on the second button to see it) :
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>As you can see, without binding the event listener to the freshly appended button, nothing is happening.
I'm not saying this is your only issue : many others can come, as for instance the Angualr context that can just ismply ignore your button.
But it is definitely one : you should try to bind your function to the button you have created, and see if it works.
answered Nov 27 '18 at 14:48
trichetrichetrichetriche
28k42359
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53499599%2fhow-can-i-externally-inject-a-new-link-in-an-angular-service-worker-webpage-and%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Following my comment, here is a snippet showing the issue (click on the second button to see it) :
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>As you can see, without binding the event listener to the freshly appended button, nothing is happening.
I'm not saying this is your only issue : many others can come, as for instance the Angualr context that can just ismply ignore your button.
But it is definitely one : you should try to bind your function to the button you have created, and see if it works.
answered Nov 27 '18 at 14:48
trichetrichetrichetriche
28k42359
add a comment |
Following my comment, here is a snippet showing the issue (click on the second button to see it) :
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>As you can see, without binding the event listener to the freshly appended button, nothing is happening.
I'm not saying this is your only issue : many others can come, as for instance the Angualr context that can just ismply ignore your button.
But it is definitely one : you should try to bind your function to the button you have created, and see if it works.
answered Nov 27 '18 at 14:48
trichetrichetrichetriche
28k42359
add a comment |
Following my comment, here is a snippet showing the issue (click on the second button to see it) :
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>As you can see, without binding the event listener to the freshly appended button, nothing is happening.
I'm not saying this is your only issue : many others can come, as for instance the Angualr context that can just ismply ignore your button.
But it is definitely one : you should try to bind your function to the button you have created, and see if it works.
answered Nov 27 '18 at 14:48
trichetrichetrichetriche
28k42359
Following my comment, here is a snippet showing the issue (click on the second button to see it) :
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>As you can see, without binding the event listener to the freshly appended button, nothing is happening.
I'm not saying this is your only issue : many others can come, as for instance the Angualr context that can just ismply ignore your button.
But it is definitely one : you should try to bind your function to the button you have created, and see if it works.
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>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>answered Nov 27 '18 at 14:48
trichetrichetrichetriche
28k42359
answered Nov 27 '18 at 14:48
trichetrichetrichetriche
28k42359
answered Nov 27 '18 at 14:48
trichetrichetrichetriche
28k42359
answered Nov 27 '18 at 14:48
trichetrichetrichetriche
28k42359
28k42359
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53499599%2fhow-can-i-externally-inject-a-new-link-in-an-angular-service-worker-webpage-and%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Listeners are attached to an element : they don't listen to events on new elements. Attach the listener to your element, and it should work.
– trichetriche
Nov 27 '18 at 12:23
Can you be sure the listener is the deciding factor on whether to reload the entire webpage or not? If so, how can I detect the listener and then attach it to the new element?
– LWC
Nov 27 '18 at 14:33
As a sidenote to my answer : I don't know how you can attach the function to the button. It seems your function is an anonymous one and doesn't hold a memory reference : If you manage to find a button with this function as a listener, you could probably get the function and tie it to your own link (be sure to use
applyorbindto get the correct context for thethiskeyword). But that is another issue, sorry I can't be of any help on that, I have never tried to dig in minified+uglified code !– trichetriche
Nov 27 '18 at 14:51
As mentioned in the OP, all of the existing links ('a' elements) already use this listener. But how do I duplicate their listener?
– LWC
Nov 27 '18 at 15:10