1

我正在使用 jQuery、jQuery.mobile、asyraf9 splitview 插件和 cubiq 的 iScroll 构建一个要添加到 iOS 应用程序内部的 splitview 页面。作为典型的拆分视图,它在左侧有一个侧边栏,在右侧有一个内容区域。

这是图片:http: //i.stack.imgur.com/kfUyE.png

我用简单的 js-line 阻止了 touchmove

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

并让内容区域用 iScroll 滚动。

但是,其中一个页面应该具有来自另一个域的嵌入式 iFrame。我不将 iScroll 用于此类页面。我在 iFrame 中有链接,所以我需要能够点击它们。

<div class="iframe-wrapper">
<iframe id="iframe-element" frameborder="0"></iframe>
</div>

它有类似的 CSS

.iframe-wrapper {
    margin: 0 auto;
    height: 100%;
    width: 670px;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
}

#iframe-element {
    height: 100%;
    width: 670px;
}

调用所需页面时,我通过 javascript 加载 iFrame 的 src

$('#page-1-3')
    .one('pageshow', function() {
        $('#iframe-element').attr('src', 'http://www.somewebsite.com');
    });

但是,虽然它适用于带有 iOS6 的 Safari,但不适用于 iOS5。有时它会滚动 iFrame 内的内容,但与此同时,它会向上或向下移动整个页面,即使我已经阻止了页面其余部分的这种行为。如果它向下滚动,它不会呈现页面末尾以下的内容(我不止一页)。

我尝试了多种解决方案并通过网络搜索,但似乎没有一种方法有效。它要么滚动内容不好,要么不渲染所有内容,或者根本不滚动内容。

谁能给我推荐一些有用的东西,好吗?

4

0 回答 0