Jump to content

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


Recommended Posts

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?

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

    <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 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' >
        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
            view.scrollTo(0, 300)            



Edited by joshun
grammer mistake
Link to comment
Share on other sites

Posted (edited)

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 by joshun
grammer mistake
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...