Box Status

Automatic jump to embedded document

Follow
New post
seraph787

How do we use Box?

Our users upload files to Box via API. We save the box file id.

Later on, our users can view the uploaded file in our web app.

In order to display the document to the user, we use the Box API and we retrieve a shared link URL based on the saved file id, and we embed the document in an iframe.

 

What's the problem?

When we render the page with the document it's made of some layout that we have and some content, and then below it, we include the document from Box. Let's say it's placed 600px from the top of the browser.

What happens for the user is that we render the page with the iframe, and once the iframe with the document is loaded the browser jumps to the document. That means that the part of the content that we have for assumed 600px is now not visible to the user and they have to explicitly scroll up to see what we defined as the top of the page.

 

Is there a way to turn it off or an available workaround? Any advice is appreciated.

0

Comments

3 comments

Date Votes
  • Kourtney

     

     

    You may be able to find something to help you in one of our customized Code Pen examples: https://codepen.io/box-platform/pens/public/2/?grid_type=list. 

     

     

    0
    Comment actions Permalink
  • wellemut

    I have the same problem on my page. When I send people this link, the user jumps right to the embeded Iframes, which is very annoying: http://zukunftsblick.freunde-waldorf.de/inhalte/

     

    How can I solve this?

     

    Thank you!

    0
    Comment actions Permalink
  • Jason

    Hey  ,

     

    Thanks for reaching out and sorry to hear about the issues! Happy to explain! The reason you're seeing this behavior is because Box's embed widget uses this underlying library (also from Box):

    https://github.com/box/box-content-preview

     

    There's an autoFocus option in the underlying javascript that is defaulted to true in the Embed Widget, but the embed widget won't allow you to alter the autoFocus option directly.

     

    Technically speaking, you have a few options, in my personal order of preference:

    • Use the underlying Javascript library yourself. If you managed to figure out the rest of the Box API and build your own page, it sounds like you'll be able to do this just fine!
    • If not, you can also try building a window to make the user "Click to expand" and then display/load the iframe. That way, the autofocus doesn't happen until the user clicks "Expand".
    • Set a timeout for how long you think the page will take to load, and then set the focus somewhere else (top of the page) after the timeout completes. For example, wait four seconds and then set the focus to the top of the page. This is a bit of a hacky workaround, so I wouldn't recommend it... but it is there.

    Hope that helps and gives you some ideas. There was a recent post about it here:

    https://community.box.com/t5/Platform-and-Development-Forum/Widget-hijacks-scrolling-page/m-p/71775#M6510

     

    And I also got a few of those ideas from searching around stackoverflow for issues with iframes taking the page's focus.

     

    0
    Comment actions Permalink

Please sign in to leave a comment.