Call parent function from iframe with firefox

Question

I have an iframe in which I have the following code:

$(document).ready(function(){
    $('.checksum').click(function(){
        window.parent.Clickarunsuministro($(this).val());
    })
})

When you click on .checksum , I want to call the function in the parent. It works perfectly in Chrome and IE, but not in Firefox.

The error that appears is:

Permission denied to access property 'Clickarunsuministro'

Any ideas what the problem could be?

Answer 1

Iframes and the pages they run in are, generally, not allowed to directly interact for security reasons. Instead, you can use message events to send strings and json objects between the owning document and the iframe. See https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage?redirectlocale=en-US&redirectslug=DOM%2Fwindow.postMessage for some details on the how and why.

Your code might work in Chrome and IE right now, but it's a safe bet that it soon won't, so better to future-proof your code in this case.

Answer 2

You can try using a jquery custom event

In iframe

$(document).ready(function(){
    $('.checksum').click(function(){
        $(window).trigger('clickarunsuministro', {data: $(this).val()})
    })
})

In parent

$('<frame-selector>').on('clickarunsuministro', function(event){
    console.log('data', event.data)
})