CODEWITHSUNDEEP
jqueryiframedynamics-crm-2011dynamics-crmonload
Ivan Jovović
Ivan Jovović

Reputation: 5298

MS CRM 2011 IFRAME "load" event not fired

I have MS CRM 2011 (5.0.9690.2243, on demand) HTML web resource which loads entity inside IFRAME:

<HTML>
    <HEAD>
        <SCRIPT type=text/javascript src="http://code.jquery.com/jquery-latest.min.js"></SCRIPT>
        <SCRIPT>
        $(document).ready(function(){ 
            if (window.console)
                console.log('doc ready');
            var f=$("#m4_ifr_entity");  
            f.bind('load', function() {
               if (window.console)
                    console.log('iframe loaded');
                // do some stuff here
            });     
        });
        </SCRIPT>
        <META charset=utf-8>
    </HEAD>
    <BODY contentEditable=true>
        <DIV style="WIDTH: 800px; FLOAT: left; HEIGHT: 600px">
            <IFRAME id=m4_ifr_entity height="100%" src="/main.aspx?etn=account&amp;pagetype=entityrecord" width="100%"></IFRAME>
        </DIV>
    </BODY>
</HTML>

When doing "Preview", both console.log() are appearing in the console. All good.

But, when I add this web resource to entity as "Navigation link" and then go to entity and click to link in navigation, only the first console.log() appears in browser console, while the other console.log() which is inside f.bind('load'... is not there, so I think that IFRAME load event is not fired at all. IFRAME itself loads just fine.

When I attach debugger to javascript, I see that f.bind('load', function() { is reached, but debugger is not stepping in.

I do not see any error in console. I did "Publish" of web resource. Tried in IE 9 and IE 11.

Question is: why jQuery f.bind('load'... is not executed in second use case?

Upvotes: 0

Views: 1124

Answers (2)

Ivan Jovović
Ivan Jovović

Reputation: 5298

Turns out that this is caused by binding to load event after the IFRAME was already loaded, therefore event handler is never executed.

There are 2 possible fixes:

put onload inside IFRAME html: 

<IFRAME onload="someJsHere()"

Or force reload IFRAME src after onload binding (this one is also useful when src is dynamically added to IFRAME via javascript):

f.bind('load', function() {
    if (window.console)
       console.log('iframe loaded');
       // do some stuff here
    });
f.attr('src', f.attr('src'));

Upvotes: 0

BlueSam
BlueSam

Reputation: 1888

Since you are already in the unsupported territory already, you may want to reach into the parent window of your html web resource (if it exists) and call some function.

in html web resource:

function onPreviewLoaded(){
//do something
}

in form javascript:

function onFormLoad(){
if(parent && parent.onPreviewLoaded)
parent.onPreviewLoaded();
}

Upvotes: 1

Related Questions