创建 iframe，显示每个 iframe 的末尾，就像我将滚动条拖到末尾一样

Question

简而言之：我只需要这个图形地图和球队标志，没有其他数据出现在屏幕上，浪费space并且没有右侧的滚动条覆盖结束图形。

var myIframe = document.getElementById('iframe');
myIframe.onload = function(){
    myIframe.contentWindow.scrollTo(0,500);
};

<iframe id="iframe" src="https://www.sofascore.com/event/9626475/attack-momentum/embed"></iframe>

创建 iframe 时，它附带了一些只占用 space 的不需要的数据，正如我在下图中圈出的那样：

当我减小 iframe 的大小以占用更少 space 时，会发生这种情况：

我希望发生的是，在创建 iframe 时，它已经滚动到末尾，因此会自动：

我可以在我的 HTML 或 script 中放入什么，以便在创建 iframes 时自动滚动吗？

我也尝试过使用 .style("margin-top","-90px");，但这样做的结果是值超出了 iframe 限制，超出了之前的限制：

如果您想进行完整测试，请使用此代码并创建一个包含 sofascore id (SofaScore_Live.csv) 的 CSV 文件：

<html>
    <head>
        <style>
            {
            box-sizing: border-box;
            }
            .vl {
            border-left: 3px solid red;
            height: 1000px;
            position: absolute;
            left: 30.3%;
            margin-left: -3px;
            top: 0;
            }
            .vl2 {
            border-left: 3px solid red;
            height: 1000px;
            position: absolute;
            left: 10.9%;
            margin-left: -3px;
            top: 0;
            }
            .vl3 {
            border-left: 3px solid red;
            height: 1000px;
            position: absolute;
            left: 69%;
            margin-left: -3px;
            top: 0;
            }
            .matches {
            text-align:center;
            float: left;
            width: 700px;
            border: 1px solid white;
            border-collapse: collapse;
            }
            .column {
            text-align:center;
            float: left;
            width: 700px;
            border: 1px solid white;
            border-collapse: collapse;
            }
            .grid {
            float: left;
            width: 100%;
            }
            .row:after {
            content: "";
            display: table;
            clear: both;
            }
            .button {
            background-color: #33ccff;
            color: black;
            font-weight: bold;
            }
            input[type=submit] {
            background-color: #33ccff;
            color: black;
            font-weight: bold;
            }
            html {
            overflow: scroll;
            overflow-x: hidden;
            }
            ::-webkit-scrollbar {
            width: 0px; /* remove scrollbar space /
            background: transparent; / optional: just make scrollbar invisible /
            }
            / optional: show position indicator in red */
            ::-webkit-scrollbar-thumb {
            background: #FF0000;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/d3-fetch@3"></script>
        </script>
    </head>
    <body style="background-color:black;">
        <div class="vl"></div>
        <div class="vl2"></div>
        <div class="vl3"></div>
        <div style="color:white;font-weight:bold" class="grid games" id="jogos-sofascore">
        </div>
            <script id="script-da-caixa-de-selecao-suspensa-5">
                var select_5 = d3.select("#jogos-sofascore")
                .append("div")
                .attr("id","select-box-5")
                .style("width","100%")

                function valorparaiframe(iframevalue) {
                    let link = iframevalue;
                        return "https://www.sofascore.com/event/" + iframevalue + "/attack-momentum/embed";
                }

                async function update() {

                    let data = await d3.csv("./SofaScore_Live.csv");

                    let update_5 = select_5.selectAll(".matches")
                        .data(data,d=>d.id);
                    
                    update_5.exit().remove();

                    // Enter new divs:
                    const enter = update_5.enter()
                        .append("div")
                        .attr("class","matches");
                    
                    // Append the children to entered divs:
                    enter.append("iframe")
                        .attr("src",d => valorparaiframe(d.id))
                        .style("width","100%")
                        .style("height","110");
                }
                
                update();
                    setInterval(update,60000);
            </script>
        </div>
    </body>
</html>

SofaScore_Live.csv CSV 示例：

Answer 1

您可以使用 scroll(x, y) 函数： scroll(0, 10000)

Answer 2

从不同来源加载的

iframe 受 same-origin-policy 保护，这会阻止您 accessing/modifying 它的内容（这就是为什么您不能使用 scrollTo 等,.).

作为解决方法，如果您知道 iframe 中内容的高度（您可以通过转到 iframe 源并获取正文的 offsetHeight 来检索），您可以将 iframe 的高度设置为内容的高度。然后，你可以把iframe包裹在容器里，设置容器的height，滚动到容器底部

const container = document.querySelector('.iframe-container')
container.scrollTop = container.scrollHeight;

iframe {
  height: 200px;
  width: 100%;
  border: none;
}

.iframe-container{
  height:120px;
  overflow:auto;
}

<div class="iframe-container">
  <iframe id="iframe" src="https://www.sofascore.com/event/9626475/attack-momentum/embed"></iframe>
</div>

创建 iframe，显示每个 iframe 的末尾，就像我将滚动条拖到末尾一样

Create iframes showing the end of each one as if I had dragged the scrollbar to the end

html

javascript

iframe