在 iframe 上滑动,传递点击事件,并且 elementFromPoint 在图像映射区域上返回 null

Posted

技术标签:

【中文标题】在 iframe 上滑动,传递点击事件,并且 elementFromPoint 在图像映射区域上返回 null【英文标题】:Swiping over an iframe, passing click events, and elementFromPoint returning null on imagemap area 【发布时间】:2014-02-16 02:47:24 【问题描述】:

我有一个 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>

当 pages-wrapper 元素被滑动时,上一页或下一页都会成为活动页面。页面大小为 100%,活动页面填充浏览器的视口。一切都在同一个域内。 iframe 的文档可以包含带有图像映射的图像。

不幸的是,iframe 会捕获鼠标事件,从而禁用父页面上的滑动功能。正如其他人所建议的,答案是覆盖一个透明的 div,使用 elementFromPoint 在 iframe 的文档中定位目标,然后手动向目标调度 click 事件。

我已经使用coverIframes plugin 实现了这个:

$.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。在尝试找到解决方法时,我想到了以下 3 个问题:

    有没有办法将父级中的点击事件直接传递给 iframe 窗口,让它像用户一样处理事件 点击窗口? (即,窗口找到目标,并且 通过 dom 的元素将事件冒泡。)

    是否有任何类似于 elementFromPoint 的替代函数 可靠地返回目标元素?

    如果我想手动处理某个区域的 null 结果,是否有 现有的 javascript 函数或 jquery 插件将确定是否 给定点在地图的区域内? (我已经看到了一些功能 在多边形中找到一个点。)

感谢您提供的任何见解!

【问题讨论】:

【参考方案1】:

我不会告诉你如何使用透明覆盖和事件捕获。我已经这样做了,它可以工作,但它不值得。

不过别担心,好消息是:我们有 AJAX!

不要为此使用iframe;您可以轻松消除拥有多个窗口对象的所有麻烦。如果所有页面都像你说的那样在同一个域上,请使用 $.ajax(url:'XXX.html') 获取内容并将其加载到 &lt;div id='page1'&gt;&lt;/div&gt; 中。

就像这个例子: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>

【讨论】:

以上是关于在 iframe 上滑动,传递点击事件,并且 elementFromPoint 在图像映射区域上返回 null的主要内容,如果未能解决你的问题,请参考以下文章

解决 swiper插件 嵌入 iframe 不能滑动问题

拦截点击 iframe 中的内容

事件分发,事件消费,事件传递机制

如何获取url中的参数并传递给iframe中的报表

在android中怎样给整个页面设置监听事件

iframe 存在时整个页面的点击事件