IFrame scrolls on desktop browsers but not on ipho

2019-09-03 13:00发布

站内问答 / 后端开发
1347 1 4

Below is some sample code that loads an iframe inside a page and then the iframe code scrolls itself using javascript call -- window.scrollTo(0,170);

Everything works fine on desktop browsers like mozilla, chrome, safari and ie but when I try it on an IPhone, the scrolling code (window.scrollTo(0,170);) does not work. All files reside on the same server.

When it works you will see that the page loads and has been scrolled upwards up to line 9. When it doesn't work the page loads but nothing gets scrolled.

Any ideas as to what I am doing wrong or as to why it does not work? Thanks in advance for your feedback :)

ifparent.html

<html>
    <head>
        <meta name="viewport" content="width=device-width">

        <style>
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }

            body {
                position: relative;
                background: #f0f0f0;
            }

            .frame_holder {
                position: absolute;
                top: 5px;
                bottom: 5px;
                left: 5px;
                right: 5px;
                background: #ffffff;
                height: 75%;

            }

            .scroll_frame {
                overflow: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling:touch;
                width: 100%;
                height: 100%;
                border: 1px solid #e0e0e0;
            }

            .my_frame {
                width: 100%;
                height: 100%;
                border: none;
                vertical-align: top;
            }

            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>

        <div class="frame_holder">
            <div id="scroll_frame" class="scroll_frame">
                <iframe class="my_frame" src="iframe.html"></iframe>
            </div>
        </div>
    </body>
</html>

<script type="text/javascript">

</script>

iframe.html

<html>
    <head>
        <title>IFRAME</title>
    </head>

    <body  onload="scroll_window()">
        1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>

        1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>

        1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>

        1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>

    </body>
</html>

<script type="text/javascript">
    function scroll_window() {
        window.scrollTo(0,170);
    }
</script>

1条回答
手持菜刀，她持情操
2楼-- · 2019-09-03 13:21

I was able to find the solution to this problem so I decided to post it in case anyone else runs into this issue. Below are the changes so that the scrolling works in iOS browsers also.

In ifparent.html above add the code below:

<script type="text/javascript">
    window.onload = scroll_window;    

    function scroll_window() {

    //If IOS the scroll bar seemes to bee assigned to the container  div (scroll_frame) in the parent window.
    //So you need to scroll scroll_frame in the parent window. This will scroll to line 16.
    var objDiv = document.getElementById("scroll_frame");
    objDiv.scrollTop = 500;    
    }
</script>

If iOS, the scroll bar seems to be assigned to the container div (scroll_frame) in the parent window. So you need to scroll the (scroll_frame) div in the parent window. This will scroll to line 26.

If Windows or Mac OS, the scroll bar seems to be assigned to the window element in the iframe. So you need to scroll the iframe window from within the iframe. This will scroll to line 9.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)