Getting 0 when trying to get the offset top value of element onload

Question

I'm working on the project that has more than one iframes. The main iframe has the page and the page contains child iframe that also have page contents.

Inside the child iframe I have the tabs, each tab have the page contents that are loaded dynamically from the server.

I'm trying to get the offset top value of a div element using offset().top from screen top when page onload. It returns some value when reloading the child iframe using 'Reload iframe', but it returns '0' when reloading the page.

I'm attaching herewith the image what I'am trying to do, please check, if I'am not clearly explained my problem above.

I tried this code and placed this code inside $(document).ready(){}, its working fine when reloading the particular iframe. But returns 0 on load.

var $stored_selector = $('#displayMedsdetail');
var offset = $stored_selector.offset(), remaining_height;
console.log(offset.top);

Can anyone please help me find out why offset().top returns 0 when reloading the page?

Answer 1

Use .contents() to get to iFrame's DOM.

Here's an example of some code I used before:

var content=$("iframe").contents().find('body').html();

You can probably rewrite it to get the div element and the offset of it.