We Keep Coding

jQuery cannot detect an injected script that updates the page

I'm trying to use jQuery to modify an element that's "injected" externally. I've tried delegation with on but it didn't work.
Here's the page, scroll down and you'll see an avatar named "Sebastian" with <div class="Avatar">.
If I go right click, Console and type: $('.Avatar'), the element is identified, but this is only because I first clicked on "Inspect element" for that element. jQuery somehow "updated" the source and now it identifies the element.
Now, try to refresh the page and type $('.Avatar') again, jQuery will not identify the element (although it's already loaded on the page).
You can take a look under "A working example" how this script is injected into the page.
My question is, is it possible (and if so, how) to modify this HTML (which seems to be inserted dynamically as the page is loaded)? It doesn't seem to be using any sort of iFrame nor anything, it just dynamically loads into the page, yet jQuery is unable to recognize it (unless you "tell it" to do so by clicking on "Inspect element" on the actual element).
P.S. I've tried using on, delegate, it doesn't work.

jQuery will not identify the element after page because it's in another iframe.
You said "It doesn't seem to be using any sort of iFrame nor anything", but in the end it's iframe.
The reason why you can find it when you go right click on element and then in developers tools you write $('.Avatar') is because once you inspect element (right click) inside developer tool iframe will change.
Furthermore, your parent iframe and iframe that have avatar element have same origin. Run document.domain inside parent and other iframe. Iframe with avatar have origin "app.talkjs.com" and parent iframe have origin"talkjs.com".
Subdomains may be same-origin.
There’s a small exclusion in the “Same Origin” policy.
If windows share the same second-level domain, for instance john.site.com, peter.site.com and site.com (so that their common second-level domain is site.com), they can be treated as coming from the “same origin”.
https://javascript.info/cross-window-communication
You should be able to catch onload iframe event and then search for .avatar.
iframe.onload = function() {
let newDoc = iframe.contentDocument;
console.log(newDoc.getElementsByClassName("avatar");
};

How to run Greasemonkey/Tampermonkey userscript repeatedly inside of iframe after full page load?

I'm trying to write a userscript working on the Etherpad page whose content will be updated continuously. The relevant part of the page structure is on the screen:
My userscript should affect all the div entries under 'td id="sidedivinner"' element. However, this element does not exist on the page initially and it is built only after the content of both iframes on the screen loads. All the solutions I found on the problem "Execute userscript after page load" failed, because they assumed either that there are no iframes, which still load after the script, or that iframe has the unique name or id.
So basically I want to execute js after all iframes load, as if I had done this via web browser console.
Also I want to run the same script after every AJAX request affecting sidedivinner (It will be too expensive to run it after every AJAX request). I suspect this solution won't work using #sidedivinner id because "waitForKeyElements.js" won't recognize an element by Id inside the iframe. How can I do this?

Add your javascript to the onload event of the iframe - not the page.
iFrame onload JavaScript event
You could use jquery to check for the creation of the #sidedivinner object. The following jquery will search in any iframes on the page.
$("iframe").contents().find("#sidedivinner")
See the following for more on these jquery functions:
https://api.jquery.com/contents/
https://api.jquery.com/find/

How do I specify (or limit) which iframe(s) iframe-resizer will act on?

I have a page that needs to load 2 iframes, and I'm using David Bradshaw's iframe-resizer code.
I control the content of the page loaded in one of them, so I have the iframeResizer.contentWindow.min.js loaded in there, and the iframe resizes perfectly.
The 2nd iframe however loads a page I don't control, so it won't resize (I get that). However, for some reason the scrollbar I add is suppressed when I load the iframe-resizer code, even with scrolling="yes" defined.
I have the iFrameResize({log:true}) code after the "controlled" iframe. The "uncontrolled" iframe is earlier on the page (and needs to be there).
When I swap the order, i.e., I move the "uncontrolled" iframe after the "controlled" iframe (and as such after the iFrameResize({log:true}) code), then I do see the scrollbar for that iframe.
So, my question is: how can I specify which iframe(s) the iframe-resizer code needs to act on?
Thanks!
P.

Set a class or ID on the iFrame you wish to control, then pass that to iframeResize.
iFrameResize({log:true},'#myIFrame');
Or you could pass the iFrame directly.
var myIFrame = document.getElementById('myIFrame');
iFrameResize({log:true},myIFrame);

Auto-click button in div on-load

I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)

I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.

You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/

Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)

How to make javascript that'll click automatically inside iframe's link?

Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...

Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.

If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.