如何在iframe元素内滚动textarea元素

Question

我有以下HTML：

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

我正在使用以下函数通过JavaScript 动态地 填充 <iframe> 元素：

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

函数receiveMasterBody的body参数包含多个<textarea>元素，每个元素都标记有'data-scroll'属性，以指示是否可滚动，是scrollTop还是scrollLeft。此属性完全是自定义的，并用于指示文本区域元素的当前滚动位置（仅供参考）。下面是包含'data-scroll'属性的<textarea>标签示例。为了显示应该滚动的示例textarea，展示函数receiveMasterBody参数的一小部分内容：

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

因此，请检查值为"3233,0"的'data-scroll'属性，表示scrollTop = 3233和scrollLeft = 0。

---

我的目标是将所有标记有'data-scroll'属性的<textarea>元素滚动到所需的滚动值。

我尝试了什么?

在我的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); 例如返回以下结果：

我成功获取滚动条的值，但是滚动没有起作用。我也尝试了使用//$(scrollElems[a]).scroll({ top: scrollPositions[0], left: scrollPositions[1] }); 这一行代码，但同样没有效果。

我可以正确获取数值，只是无法滚动包含在<iframe>元素中的<textarea>。

- G.Dimov

Answer 1

innerHTML只是HTML文本代码，它不是iframe内部任何对象的引用。对于jBody，您需要获取$(iframeWindow.document.body)的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。

- Christos Lytras

---

谢谢你的回答！它解决了我的问题。我离正确答案很近了。再过一个小时我就会授予奖励。 :) - G.Dimov