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

Viewed 125

In short: what I only need is this graphic map and the team symbol, without the other data appearing on the screen, wasting space and without the scrollbar on the right side that covers the end of the graphic.

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>

When creating the iframe, it comes with some unwanted data that only takes up space, as I left circled in the image below:

enter image description here

When I decrease the size of the iframe to take up less space, this happens:

enter image description here

What I would like to happen is that when creating the iframe, it would already scroll to the end, thus automatically:

enter image description here

Is there anything I can put in my HTML or script that can do this automatic scrolling when creating iframes?

I also tried using .style("margin-top","-90px"); but doing so happens that the values exceed the iframe limits getting on top of the previous ones:

enter image description here

If you want to do the complete test, use this code and create a CSV file with the sofascore ids (SofaScore_Live.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 example:

id
9576375
9602988
9643997
9944904
9591418
9595065
9595129
9595043
9671970
9698797
9671975
9671974
9578901
2 Answers

iframes loaded from a different origin are protected by the same-origin-policy, which prevents you from accessing/modifying the content of it (which is why you can't use scrollTo etc,.).

As a workaround, if you know the height of the content in the iframe (which you can retrieve by going to the iframe source and getting the body's offsetHeight), you can set the height of the iframe to the height of the content. Then, you can wrap the iframe in a container, set the container's height, and scroll to the bottom of the container.

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>

You can use the scroll(x, y) function: scroll(0, 10000)

Related