Question

我正在使用jQuery，jQuery.mobile，asyraf9 splitview plugin和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中的内容，但同时会向上或向下移动整个页面，即使我已经阻止了页面其余部分的这种行为。如果它向下滚动，它不会将内容呈现在页面的末尾（我在一页上面有更多内容）。

我尝试了很多解决方案并通过网络搜索，但似乎没有人能够正常工作。它要么滚动内容不好，要么不渲染所有内容，或者根本不滚动内容。

有人可以推荐一些有用的东西吗？

滚动Safari，iOS5的iFrame内容

0 个答案: