Skip to content

Instantly share code, notes, and snippets.

@yaquawa
Created August 9, 2019 06:51
Show Gist options
  • Save yaquawa/f140d314e6c5d110600a87825412dd73 to your computer and use it in GitHub Desktop.
Save yaquawa/f140d314e6c5d110600a87825412dd73 to your computer and use it in GitHub Desktop.
Propagate iframe click event
// Click event happened in iframe won't propagate to the containing element of it.
// This script provides a workaround to simulate the propagation of click event of iframe.
//
// inspired by https://gist.github.com/jaydson/1780598#gistcomment-2609301
(function ($) {
var selector = '[data-event-category][data-event-action]';
var $elementsContainIframe = $(selector).filter(function () {
return $(this).find('iframe,script').length;
});
if ($elementsContainIframe.length === 0) {
return;
}
$(window).on('blur', function () {
setTimeout(function () {
if (document.activeElement instanceof HTMLIFrameElement) {
// arbitrary iframe clicked in the current window
$elementsContainIframe.each(function () {
var iframe = $(this).find('iframe')[0];
if (iframe === document.activeElement) {
// trigger the `click` event for the element which contains the clicked iframe
$(this).trigger('click');
$(iframe).trigger('blur');
}
});
}
}, 0);
});
})(jQuery);
@lwx-jaswant
Copy link

I want when any one click on search button then its width 100% and height 100%

<iframe id="frmae" width="500" style="overflow:hidden;background-color:transparent;" src="http://vco.sax.softvoyage.com/cgi-bin/querypackage.cgi?code_ag=vco&alias=TKS&language=EN&mode=wide" frameborder="0" allowTransparency="true"></iframe>

@GB185172
Copy link

GB185172 commented Mar 8, 2024

@yaquawa This is not allowing to enter the data in input text fields due to blur event in Iframe. Is there any other way to fix this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment