使用jQuery UI对话框iframe显示onload

Question

i am looking for suggestions/workarounds or better ways to do this This little bit of code works for FF and chrome but hideProgress does not get called in IE

function showPDF(url){
       $("#divId")
               .html('<div id="loading">Loading....</div>
                      <iframe id="modalIframeId" width="100%" height="100%" 
                          src='+url+' marginWidth="0" marginHeight="0" frameBorder="0"
                          scrolling="auto" title="Dialog Title" 
                      onload="hideProgress();">Your browser does not support</iframe>')
               .dialog('open');
        return ;
   }
   function hideProgress(){
       $('#loading').hide();
   }

Thanks for any help

Answer 1

Try assigning the onload event handler call to #modalIframeId with the .on() or .delegate() function instead of placing it into the <iframe> tag you're inserting. I'm surprised it works in FF and Chrome - most of the time, assigning an event handler like that with any dynamic piece of code doesn't work because of how jQuery interacts with the code of the page. You may also want to experiment with having a unique id for the #modalIframeId iframe - If you were to call the showPDF() function more than once on a page, it would create elements with duplicate id's and that confuses jQuery and produces unexpected results. in my experience, even if you remove #modalIframeId and then re-add it, it may still cause problems. A unique id each time you create it prevents this potential problem.

Answer 2

As the previous answer mentioned the issue here is the fact that you are attaching the event handler inline. The functionality you're looking for can be achieved by simply breaking up your function. I've demonstrated this in this jsFiddle:

http://jsfiddle.net/xyctR/2/

'loaded' is logged in all browsers.

Furthermore, passing 'open' to jQuery UI's dialog method is unnecessary in this case. Just call dialog() . ​