I have the following HTML:
<iframe id="screenshare" ref="screenshare" class="fullScreen2"></iframe>
I am filling the <iframe>
element dynamically using JavaScript with the following function:
function receiveMasterBody(body, width, height) {
let iframe = document.getElementById('screenshare');
let iframeWindow = iframe.contentWindow;
$("#screenshare").width(width);
$("#screenshare").height(height);
iframeWindow.document.body.innerHTML = body;
}
The body
parameter of the function receiveMasterBody
contains multiple <textarea>
elements and each and every one of them is marked with 'data-scroll'
attribute in case a scroll is available, either scrollTop
or scrollLeft
. This attribute is entirely custom and is used to indicate where the current scroll of the textarea element should be(only for information). Example of <textarea>
tag containing the 'data-scroll'
attribute. Displaying a fraction of the body
parameter to show example textarea that should be scrolled:
<textarea class="form-control" id="exampleFormControlTextarea2" rows="3" data-scroll="3233,0" style="margin: 0px 402px 0px 0px; height: 301px; width: 307px;">... A lot of content here ...</textarea>
So check the 'data-scroll'
attribute with value "3233,0"
, indicating scrollTop = 3233
and scrollLeft = 0
.
What I want to do is to scroll all <textarea>
elements marked with 'data-scroll'
attribute to the desired scroll values.
What I tried?
Inside my receiveMasterBody
function, exactly after the code there:
let jBody = $(iframeWindow.document.body.innerHTML);
let scrollElems = jBody.find('[data-scroll]');
for (let a = 0; a < scrollElems.length; a++) {
let scrollPositions = scrollElems[a].getAttribute('data-scroll').split(',').map(x => +x);
console.log(scrollPositions);
//$(scrollElems[a]).scroll({ top: scrollPositions[0], left: scrollPositions[1] });
$(scrollElems[a]).scrollTop = scrollPositions[0];
}
This line console.log(scrollPositions);
returns the following for example:
I am getting the scroll values correctly, but the scrolling is not working. I've tried with the //$(scrollElems[a]).scroll({ top: scrollPositions[0], left: scrollPositions[1] });
line as well - no results as well.
I get the correct values, I just couldn't scroll the <textarea>
inside the <iframe>
element.
innerHTML
it's just HTML text code, it's not a reference to any object inside the iframe
. For the jBody
, you need to get the body
of $(iframeWindow.document.body)
and not the HTML $(iframeWindow.document.body.innerHTML)
:
// Get the body and NOT body.innerHTML
let jBody = $(iframeWindow.document.body);
let scrollElems = jBody.find('[data-scroll]');
for (let a = 0; a < scrollElems.length; a++) {
let scrollPositions = scrollElems[a].getAttribute('data-scroll').split(',').map(x => +x);
console.log(scrollPositions);
$(scrollElems[a]).scrollTop(scrollPositions[0]);
// OR
// $(scrollElems[a]).scroll({ top: scrollPositions[0], left: scrollPositions[1] });
}
Check this working Stackblitz.