Tim*_*imo 11 iframe html5 scroll ios iscroll
我在我的移动启用网站上使用iScroll(在这里使用iPhone)在div内滚动.
在这个div中,我有一个像这样固定高度的iframe:
<body>
<div id="iscroller">
<iframe id="theIframe"></iframe>
Other stuff
</div>
</body>
现在,在div中滚动时,一切都按预期工作,但是当iframe上的滚动手势开始时我无法滚动.
这个问题在这里描述得很好:https://github.com/cubiq/iscroll/issues/41
所以,我通过应用pointer-events:noneiframe 来使用该帖子中的css解决方法.
现在滚动工作完美但我无法点击iframe中定义的任何链接,因为iframe上的所有点击/触摸事件似乎都被阻止了pointer-events: none.
所以我认为:
"好的,当用户滚动时,我需要
pointer-events:none.如果他没有滚动(而是点击),我必须设置pointer-events:auto才能让点击/触摸事件通过."
所以我这样做了:
CSS
#theIframe{pointer-events:none}
JavaScript的
$("#theIframe").bind("touchstart", function(){
// Enable click before click is triggered
$(this).css("pointer-events", "auto");
});
$("#theIframe").bind("touchmove", function(){
// Disable click/touch events while scrolling
$(this).css("pointer-events", "none");
});
即使添加此功能也不起作用:
$("#theIframe").bind("touchend", function(){
// Re-enable click/touch events after releasing
$(this).css("pointer-events", "auto");
});
无论我做什么:滚动不起作用或点击iframe内的链接不起作用.
不行.有任何想法吗？
Tim*_*imo 10
我找到了完美的解决方案.适用于iOS和Android.
基本思想是在iframe的顶部放置一个div层.这样滚动工作顺利.
如果用户想要点击/点击该iframe上的元素,我只需点击图层上的点击,保存x和y坐标并在这些坐标上触发iframe内容上的点击事件:
HTML:
<div id="wrapper">
<div id="layer"></div>
<iframe id="theIframe"></iframe>
</div>
Other stuff
CSS:
#layer{
position:absolute;
opacity:0;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
z-index:2
}
JavaScript的:
$('#layer').click(function(event){
var iframe = $('#theIframe').get(0);
var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
// Find click position (coordinates)
var x = event.offsetX;
var y = event.offsetY;
// Trigger click inside iframe
var link = iframeDoc.elementFromPoint(x, y);
var newEvent = iframeDoc.createEvent('HTMLEvents');
newEvent.initEvent('click', true, true);
link.dispatchEvent(newEvent);
});
| 归档时间： |
|
| 查看次数： |
10960 次 |
| 最近记录： |