How to scroll textarea elements inside an iframe element

user_10645322 0
Viewed 180

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:
enter image description here

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.

scroll textarea iframe jquery javascript
1 Answers

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.

user_18896850
Related