Jef*_*ffR 6 javascript iframe jquery imagemap swipe
我有一个html文档,其中包含3个表示上一页,当前页和下一页的iframe.我正在尝试启用页面滑动(通过jquery touchswipe插件),但也让点击进入iframe内的文档.这是HTML:
<body>
<div id="pages-wrapper">
<div id="page1" class="page-div previous-page">
<iframe id="frame1" class="page-frame"></iframe>
</div>
<div id="page2" class="page-div active-page">
<iframe id="frame2" class="page-frame"></iframe>
</div>
<div id="page3" class="page-div next-page">
<iframe id="frame3" class="page-frame"></iframe>
</div>
</div>
</body>
刷页面包装元素时,上一页或下一页成为活动页面.页面大小为100%,活动页面填充浏览器的视口.一切都在同一个领域内.iframe的文档可以包含带有图像映射的图像.
不幸的是,iframe捕获鼠标事件,禁用父页面上的滑动功能.正如其他人所建议的那样,答案是覆盖透明div,使用elementFromPoint在iframe的文档中定位目标,并手动将click事件分派给目标.
我使用coverIframes插件实现了这个:
$.fn.coverIframes = function(){
$.each($("iframe",this),function(i,v){
var ifr = $(v);
var wr = $("<div id='wr"+new Date().getTime()+i+"' style='z-index: 999999; opacity: 0; position:absolute; width:100%;'></div>");
ifr.before(wr);
wr.height(ifr.height());
wr.click(function(event){
var iframe = ifr.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);
});
})
};
虽然这种方法适用于大多数元素,但对于图像映射的区域却没有这样做 - 至少在Chrome浏览器中(版本32).在这些实例中,它返回null.在尝试找到解决方法时,我想到了以下三个问题:
有没有办法将父项中的单击事件直接传递给iframe窗口,并让它像处理用户单击窗口一样处理事件？(即窗口找到目标,并通过dom的元素向上冒泡.)
是否有任何类似于elementFromPoint的替代函数可靠地返回目标元素？
如果我想在一个区域上手动处理null结果,是否有一个现有的javascript函数或jquery插件可以确定给定的点是否在地图的区域内？(我已经看到了一些在多边形中找到一个点的函数.)
感谢您提供的任何见解!
我不会告诉您如何使用透明叠加和事件捕获。我已经这样做了，它可以工作，但不值得。
但别担心，好消息是：我们有 AJAX！
不要用于iframe此目的；您可以轻松消除拥有多个窗口对象的所有麻烦。如果所有页面都像您所说的那样位于同一域中，请使用$.ajax({url:'XXX.html'})来获取内容并将其加载到其中<div id='page1'></div>。
就像这个例子一样： https: //jsfiddle.net/q69d0L63/
想法：
1）如果请求的页面不在同一域中（但您说的是同一域，所以没问题），则它们可能需要 CORS 标头。
2) 请求的URL的内容不必是完整的HTML文档，它可以只是HTML文档片段。
示例代码（由于标头的原因不适用于 SO，但适用于 JSFiddle。要验证，请在单击时监视 JS 控制台和网络流量）：
var urls = ['page1.html', 'page2.html', 'page3.html']; // just an example; test data
var curIdx = -1;
swipe = function(e) {
getNextPage();
}
getNextPage = function() {
curIdx = (curIdx + 1) % 3;
var url = urls[curIdx];
$("#page_content").html('Loading...');
$.ajax({
url: url,
async: true,
success: function(data) {
var html = $(data).find("span:first"); // filter input if desired
$("#page_content").html(html.html());
},
error: function(jqXHR, status, error) {
$("#page_content").html([status, error].join(': '));
}
});
}
getNextPage();#page_content {
background-color: #eee;
padding: 10px;
font-family: 'Segoe UI', Arial;
font-size: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Touch or click to simulate swipe' onclick='swipe();' />
<h3>Content loaded by AJAX</h3>
<div id='page_content'></div>| 归档时间： |
|
| 查看次数： |
2099 次 |
| 最近记录： |