How to scroll an iframe from the parent page using Javascript?

joshun · June 13, 2024

I know that iframe is now confined due to security concerns, and only a few attributes can be applied to.

However, I want to make a function that auto scrolls the iframe y-scroll on the parent page, is it possible to do so? Because a user can scroll on his/her own manually. Here is a brief scenario that need this functionality - a reader digest site that collects news articles on a particular event, say one UN meeting, firstly the iframe needs to jump to different webpages owned by different media that covers this event, and it can jump to a particular position like 'US representative says ...'

Currently I am able to make the first functionality, while the second needs 3 steps -

1) find the keywords

2) tell the position of the keywords (x,y) or which line

3) scroll the right bar of the iframe.

I am now trying the 3rd step and encounters this issue: I cannot scroll down the bar afterI instruct how much pixels(300) it should scroll down. Is it completely forbidden?

<html> 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>iframe control</title>
</head>
<body>

    <h3>find a keyword in a page and scroll the bar to it!</h3>
    <div style='margin-bottom: 0.5em'>Webpage Url
        <input type='text' id='url' style='inline; width:25em'>
        <button onclick="goto()">Go!</button>
        Keyword to Search
        <input type='text' id='keyword' style='inline; width:10em'>
        <button onclick="scrollto()">Locate!</button>
    </div>
    
    <div style="width:100%; height:calc(100vh - 7em); border: 1px solid; ">
        <iFrame id="iFrame1" name="iFrame1" src="https://www.theguardian.com" width="100%" height="100%" sandbox='allow-same-origin allow-scripts allow-top-navigation' >
        </iFrame>
    </div> 
    
    <script>
        const view = document.getElementById('iFrame1');
        
        function goto(){
            let url = document.getElementById('url').value
            if ( url.indexOf(':')==-1 ){
                url = 'https://'+url
            }
            view.src = url
        };
        
        function scrollto(){
            
//           3) Scroll the vertical bar of the iframe given y-coorinate
            //console.log(view.scroll)
            
            view.scrollTo(0, 300)            
            
        };
  </script>
  </body>
</html>

Edited June 13, 2024 by joshun
grammer mistake

joshun · June 13, 2024

BTW, I tried many methods on this page , but most of them encounter this error:

Blocked a frame with origin "null" from accessing a cross-origin frame

Edited June 13, 2024 by joshun
grammer mistake

Ingolme · June 13, 2024

These features should work on a real server, but browsers are very limited if you're running them from your filesystem.

I recommend installing a local test server on your computer. There's XAMPP on Windows and LAMP on Linux.

Sign In

How to scroll an iframe from the parent page using Javascript?

Recommended Posts

joshun

joshun

Ingolme

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity