如何在 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。这个属性完全是自定义，用于指示textarea元素的当前滚动位置（仅供参考）。包含 'data-scroll' 属性的 <textarea> 标签示例。显示 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。

我想做的是将所有标有 '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); returns 下面举例：

我得到的滚动值是正确的，但是滚动不工作。我也尝试使用 //$(scrollElems[a]).scroll({ top: scrollPositions[0], left: scrollPositions[1] }); 行 - 也没有结果。

我得到了正确的值，只是无法在 <iframe> 元素内滚动 <textarea>。

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。

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

How to scroll textarea elements inside an iframe element

javascript

iframe

jquery

scroll

textarea

我尝试了什么？