我正在使用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加载src for iFrame
$('#page-1-3')
.one('pageshow', function() {
$('#iframe-element').attr('src', 'http://www.somewebsite.com');
});
虽然它适用于iOS6的Safari,但它不适用于iOS5 . 有时它会滚动iFrame中的内容,但同时,它会向上或向下移动整个页面,即使我已经阻止了页面其余部分的这种行为 . 如果它向下滚动它,它不会将内容呈现在页面的末尾(我有一个页面以上) .
我已经尝试了很多解决方案并通过网络搜索,但似乎没有人能够工作 . 它要么滚动内容不好,要么不渲染所有内容,或者根本不滚动内容 .
有人可以推荐一些有用的东西吗?