Как прокрутить элементы textarea внутри элемента iframe - PullRequest
Новая
       9

Как прокрутить элементы textarea внутри элемента iframe

3 голосов
/ 26 февраля 2020

У меня есть следующее HTML: 

<iframe id="screenshare" ref="screenshare" class="fullScreen2"></iframe>

Я заполняю <iframe> элемент динамически , используя JavaScript со следующей функцией: 

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;
}

Параметр body функции receiveMasterBody содержит несколько элементов <textarea>, и каждый из них помечается атрибутом 'data-scroll', если доступна прокрутка, либо scrollTop, либо scrollLeft. Этот атрибут полностью custom и используется, чтобы указать, где должна быть текущая прокрутка элемента textarea (только для информации). Пример тега <textarea>, содержащего атрибут 'data-scroll'. Отображение части параметра body для показа примера текстовой области, которую необходимо прокрутить: 

<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>

Так что проверьте атрибут 'data-scroll' со значением "3233,0", указывая scrollTop = 3233 и scrollLeft = 0.

Я хочу прокрутить все элементы <textarea>, отмеченные атрибутом 'data-scroll', до нужных значений прокрутки.

Что я пробовал?

Внутри моей функции receiveMasterBody, точно после кода там: 

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];
}

Эта строка console.log(scrollPositions); возвращает следующее, например:
enter image description here

Я правильно получаю значения прокрутки, но прокрутка не работает. Я тоже пробовал с //$(scrollElems[a]).scroll({ top: scrollPositions[0], left: scrollPositions[1] }); строкой - тоже никаких результатов.

Я получил правильные значения, я просто не мог прокрутить <textarea> внутри элемента <iframe>.

1 Ответ

1 голос
/ 04 марта 2020

innerHTML это просто HTML текстовый код, это не ссылка на какой-либо объект внутри iframe. Для jBody вам необходимо получить body из $(iframeWindow.document.body), а не 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] });
}

Проверьте эту работу Stackblitz .

...