When within iframe JQuery Mobile autoscrolls to th

2019-08-04 00:51发布

问题:

I need to embed website developed for jquery mobile to the regular website using iframe. This works so far, but parent page is automatically scrolled down to the top of iframe, which is not desired and should be prevented. Here's the code I have.

Parent Page(parent.html):

<div style="margin-top:1500px">SPACER</div>
<iframe src="frame.html" width="660px" frameborder="0" scrolling="no"></iframe>

Embedded page(frame.html):

<!DOCTYPE html><html lang="de">
<head>
    <title>Embedded page</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>    
</head>
<body>
  THIS IS MY TEST
</body>
</html>

Any thoughts how to solve that?

回答1:

It appreared that jquery mobile's focusPage() function is causing this scroll effect, so I ended up simply preventing it from running when inside an iframe.

if (top!==self) { //if iside iframe
    //don't use focusPage for embedded site to prevent autoscroll
    $.mobile.focusPage = function ( page ) {
        return;
    }
}