Last active
September 18, 2019 18:57
-
-
Save agaase/6971953 to your computer and use it in GitHub Desktop.
This jquery extended function covers all the iframes inside an element with a transparent div and dispatches any "click"(only click) to the iframe. This is a workaround for the case when you dont want an iframe to swallow touch events on the page and is normally valid in the case of inline ads.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$.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); | |
}); | |
}) | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi I found this solution on a stack overflow question and was wondering if you could give me a hand. I have hooked your code up but when i click the overlay and it dispatches the event nothing happens:
this is what i have logged out:
iframe = the iframe of ad
iframeDoc = #document
link = [object HTMLImageElement]
but no click event gets fired. any pointers?