Disabling default button action from the iframe parent

Question

I have a website that includes all kinds of websites using an iframe element, so I wanted to have an option to disable default submit action of all button elements inside the iframe(I have overcome cross-origin problems).

Now, first, I tried with adding 'disabled' attribute to the button elements inside the iframe and that works perfectly, but I also found that it looks awful on some websites(css issue) so I have focused on adding a new click event handler that would just return false and prevent default action. I tried first on the live website(without the iframe), from the chrome console running this:

// disable all click handler

$('button').off('click')

// Will submit form without this handler

$('button').bind('click', function(event) { event.stopPropagation(); return false; } );

and this successfully disables submit action. However, when I tried the same approach with the iframe:

<iframe id="iframe" src='http://somewebsite.com'></iframe>

<script>
 var element = $($('#iframe').prop('contentDocument')).find('button').get(3);
 $(element).off('click');
 $(element).bind('click', function(event) { event.stopPropagation(); return false; } );
 console.log(jQuery._data(element, 'events').click[0].handler)
 // output  function (event) { event.stopPropagation(); return false; }
</script>

As you can see, DOM element inside the iframe has provided event handler to stop default action, but for some reason that doesn't prevent it. Is there any reason this doesn't work with an iframe ?

Answer 1

Can you try the following? It will make sure the iframe is loaded then will check its content:

 $("iframe").load(function (){
    var btn = $('iframe').contents().find('bitton');
    btn.off('click');
    btn.bind('click', function(event) { event.stopPropagation(); return false; } );

 });