在ImageMap区域上刷一下iframe，通过单击事件和元素Frompoint返回null

我有一个HTML文档，其中包括3个代表上一个，当前和下一页的iframes。我正在尝试启用页面刷新（通过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>

刷时页面元素时，上一页或下一页变为activePage。页面大小为100％，活动页面填充浏览器的视口。一切都在同一域内。iframe的文档可以包含带有图像的图像。

不幸的是，iframes捕获鼠标事件，禁用父页面上的滑动功能。正如其他人所建议的那样，答案是覆盖透明的div，使用Element Frompoint将目标定位在Iframe文档中，并手动将单击事件派遣到目标。

我已经使用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);
        });
    })
};

尽管这种方法适用于大多数元素，但对于ImageMap的区域而言，它至少在Chrome浏览器内（VER 32）。在这些情况下，它返回零。在试图找到解决方法时，以下是三个问题：

有没有办法将直接在iframe窗口中的单击事件传递到iframe窗口中，然后让它完全处理事件，就好像用户在窗口上单击了吗？（即，窗口找到目标，并通过DOM的元素将事件冒泡。）
是否有类似于元素Frompoint类似的替代功能，可以可靠地返回目标元素？
如果我想在区域上手动处理空结果，是否存在现有的JavaScript函数或jQuery插件，以确定给定点是否在地图区域内？（我已经看到了在多边形中找到一个点的一些功能。）

我不会告诉您如何使用透明叠加层和捕获事件。我已经这样做了，它可以起作用，但这是不值得的。

但不用担心，好消息是：我们有Ajax！

不要使用iframe；您可以轻松消除具有多个窗口对象的所有麻烦。如果所有页面都与您说的同一域上，请使用$.ajax({url:'XXX.html'})获取内容并将其加载到<div id='page1'></div>中。

喜欢在此示例中：https：//jsfiddle.net/q69d0l63/

想法：

1）如果要求的页面不在同一域（但是您说相同的域，所以没有问题）。

）。

2）请求的URL的内容不必是完整的HTML文档，它只能是HTML文档片段。

示例代码（由于标题而无法使用，但在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>

相关内容

最新更新

热门标签：