iframe을 넘기고 click 이벤트를 전달하고 imagemap 영역에 null을 반환하는 elementFromPoint

Question

이전, 현재 및 다음 페이지를 나타내는 3 개의 iframe을 포함하는 html 문서가 있습니다. jquery touchswipe 플러그인을 통해 페이지를 스 와이프 할 수 있도록 설정하고 있지만 iframe 내부의 문서를 클릭하도록합니다. 다음은 HTML 형식입니다.

페이지 래퍼 요소를 스 와이프하면 이전 페이지 또는 다음 페이지가 활성 페이지가됩니다. 페이지의 크기는 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); 
     }); 
    }) 
}; 

있지만, 그것은 이미지 맵의 영역에 대해 그렇게하지 않습니다 - 적어도 크롬 브라우저 내에서 (32 VER). 이러한 경우 null을 반환합니다. 해결 방법을 찾기 위해 노력에서, 여기에 마음에 와서 3 questons 있습니다

1. 는 iframe이 창에 직접 부모의 클릭 이벤트를 전달하고 정확하게 이벤트를 처리 할 수있는 방법이 있는지 등 사용자는 창에서 을 클릭 했습니까? (즉, 윈도우가 표적 발견 및 는 DOM의 요소를 통해 이벤트 거품.)

2. 확실 타겟 요소를 돌려 elementFromPoint 유사한 대체 할 수있는 다른 기능이 있는가?

3. 내가 수동으로 지역에 널 (null) 결과를 처리하는 경우가 주어진 지점이지도의 영역 내에 있는지 확인합니다 자바 스크립트 함수 또는 jQuery 플러그인을 존재하는 ? (I 다각형의 한 지점을 찾는 A의 일부 기능을 본 적이있다.)

감사를 당신이 제공 할 수있는 통찰력!

Answer 1

투명 오버레이 및 이벤트 캡처를 사용하는 방법은 알려 드리지 않습니다. 나는 이것을 해냈다. 그러나 효과가있을 수 있지만, 그만한 가치는 없다.

하지만 걱정하지 마세요, 좋은 소식은 : 우리는 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>