get-nested-bounding-client-rect
This package provides a function that gives you a bounding DOMRect for an HTMLElement, taking into account offsets caused by any iframe(s) containing that element.
Imagine you have this in your DOM:
And the page inside the iframe renders this:
... And you want to draw an overlay tooltip on top of that <video> there, when the user hovers over it.
If you call getBoundingClientRect on that <video> element, the numbers in the DOMRect returned are relative to the iframe's document, not your document (its parent). So you couldn't use them to position a tooltip in your document.
If you use the getNestedBoundingClientRect function provided by this package instead, then you'll get a DOMRect whose numbers are relative to your document.
Installation
npm install --save get-nested-bounding-client-rect
Usage
const getNestedBoundingClientRect = ; // el can be any HTMLElement, within an iframe or not (or nested within multiple iframes)const el = document contentDocument; const rect = ; // Resulting rect has offsets added to compensate for any iframes el is nested withinconsole;// {// top: 45,// left: 45,// bottom: 245,// right: 245,// width: 200,// height: 200,// }If you have an element nested within multiple iframes and you need to calculate the offset relative to one of the iframes in the root document rather than the root document itself,
- God help you
- You can pass in an iframe's
windowobject as the second argument togetNestedBoundingClientRect.
const getNestedBoundingClientRect = ; // Some iframe that you want to calculate a rect relative toconst iframe = document;// The window object (global) inside that iframeconst iframeWindow = iframecontentDocumentdefaultView; // el is some deep descendant of that iframe; in this case, it's nested in another inner iframe (iframe2)const iframe2 = iframecontentDocument;const el = iframe2contentDocument; const rect = ; // Resulting rect has offsets added for iframe2 but not iframeconsole;// {// top: 45,// left: 45,// bottom: 245,// right: 245,// width: 200,// height: 200,// }Note that this will only work if the element you pass into getNestedBoundingClientRect is within the iframe window you pass in; otherwise, it will behave as if you didn't pass an iframe window in.
License
MIT