We Keep Coding

Detect when iframe & elements are completely rendered, not just html is loaded

So i have an embedded iframe and i need to detect when the elements are completely rendered. The jquery load() and ready() events only detect when the html is loaded and fire immediately without waiting for the iframe contents to render.
i need to change the size & position of some elements via jquery, but jquery isn't accessing them.
I think the reason it can't access the elements in the iframe is because when the jquery file is ran, the elements aren't rendered yet.

window.onload=function(){
var iframe=document.getElementById('iframeWrapper');
iframe.onload=function(){
console.log('laod the iframe')
};
};

How to get the current document of an element with jQuery

I have a complex code that travels inside windows and iframes (yes, windows cause I open some windows with window.open sometimes and also travel inside iframes) and when some condition apply I get an element from inside of those iframes (they usually are DIVs and SPANs).
So, I have the element that I want in the object "$(this)" so from the parent window how can I know the "document" element that has this element? I need to get the "document" element that has "$(this)" and set some attributes to it.
I tried $(this).parents(document) but it does not work.

If this refers to an element (such that $(this) would give you a jQuery wrapper around it) or indeed any Node, then this.ownerDocument is a reference to the document the element is in (null if it's not in a document). Details in ownerDocument in the specification.

why does console.log(document.body) give different looking result?

I embedded console.log(document.body) at my local page for learning purpose and when I hit refresh it displayed properties of body element like baseURL, innerHTML, etc... rather than its
content. Why is this happening? (I am using Chrome43)

In JavaScript and the DOM, document.body is an object, and when you log it with console, Chrome is displaying displaying the object, which includes all of its properties. The content of document.body can be found in the innerHTML property and accessible via other properties as well.
Chrome may be displaying the object properties instead of the DOM tree if there's a race condition and console.log(document.body) is fired prior to the completion of the DOM tree.
If you need the DOM tree, then try logging document.body after the body loads.

document is the root of the DOM, not the same as window, the global browser scope. console.log(document.body); logs the DOM element, not the JavaScript object.

JavaScript in iFrame modify objects out of the iFrame

I have a page with an iFrame embeded. Now I want to modify a object (for example a Button) outside this iFrame by clicking on a button inside the iFrame (with Javascript).
How does this work? Can I just do it like usual?

You can access the parent window using window.parent. From that point, you should be able to do it like usual.
Example :
$('#yourButtonId', window.parent.document).
See also how to access iFrame parent page using jquery? as the question has already been asked

javascript update parent html

I'm trying to update the innerHTML of a div tag that's within the parent window from within an iframe. How do I access the parent window?

Use window.parent. Note, however, that you can only manipulate the parent document if it belongs to the same domain.