Javascript/Jquery accessing element attributes in an iframe from within the child document

Question

I am trying to create a web app that displays chord charts for a number of songs. Each within it's own iframe on separate tabs. I'm using a jquery library. Each chart uses ajax to interrogate a DB to get the data to display content. It calculates metrics such as header height, footer height, page height and width to for pagination. The javascript is running from within the iframe not from the parent.

The chord chart pages behave themselves when I load a page as a normal web page. But as soon as I open the page within an iframe, the page doesn't display correctly because I can't calculate the metrics on the page. It seems that some attributes are undefined.

I'm using the following code to get a "page" element (as an example) on the chart from within the iframe.

var x = window.parent.document.getElementById("iframe2");
if (x)  {var s = $(x).contents().find('#page'+ pagecounter) ;}
if (s) alert ($(s).attr("id"));

"s" is correctly identified and it's id is correctly displayed. So I know that the right element is selected.

However, (as a few examples),

$(s).offset().top = 0 //when it should be 5
$(s).offset().left= 0 // should not be
$(s).css('padding-top') //is undefined.

These are right when a web page is loaded outside of the iframe. Tried everything I've found relating to the issue but no solution works.

Appreciate some help.

I have simulated pages on the charts. So to determine how many lines I can get on a page, I interrogate other elements to see how much space i have on a "page". With .css() i can margins and paddings for example. Offset allows me to check heights. I'm going to this much trouble so I can set up pages for different devices and screen orientations. — Phill O'Flynn
– Phill O'Flynn, Commented Nov 3, 2017 at 2:49
Where are the values set for the CSS properties queried? Not certain what issue is? — guest271314
– guest271314, Commented Nov 3, 2017 at 2:56
i'm using "if (s) alert ($(s).attr("id"));" to test what metrics are not being processed. [alert ($(s).offset().top) = 0 //when it should be 5 alert ($(s).offset().left) = 0 // should not be alert ($(s).css('padding-top') ) //is undefined.] — Phill O'Flynn
– Phill O'Flynn, Commented Nov 3, 2017 at 3:06

Phill O'Flynn · Accepted Answer · 2018-10-12 19:58:40Z

1

I was loading everything into jquery ui tab which turns out to be a hidden div until you click on the tab. So it was being created but not displayed so the metrics couldn't be determined

answered Oct 12, 2018 at 19:58

Phill O'Flynn

134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript/Jquery accessing element attributes in an iframe from within the child document

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related