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

Question

我有以下 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 。这个属性完全是自定义，用于指示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);例如返回以下内容:

我正确获取了滚动值，但滚动不起作用。我尝试过 //$(scrollElems[a]).scroll({ top: scrollPositions[0], left: scrollPositions[1] });也行 - 也没有结果。

我得到了正确的值，但我无法滚动 <textarea>里面<iframe>元素。

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 .