Add javascript to iframe src attribute

Question

I have a javascript function that gets called after a successful jQuery AJAX call.

 function launchTool(user, pass, name, hash, port) 
 {
     var iframe = jQuery('<iframe id="AppletFrame" src="http://www.mysite.com/applications/applet.html"></iframe>');
     var $dialog = jQuery('<div></div>');
     $dialog.append(iframe);
     $dialog.dialog({
         title: name,
         width: '425',
         height: '400',
         modal: true,
         close: function () {
             iframe.attr("src", "");
         }
     });
 }

This opens up a java applet that is in an iframe which is shown in a jQuery dialog. This works great but now I need to pass in values to the java applet. This post looks exactly what I need.

So I tried this:

function launchTool(user, pass, name, hash, port) 
 {

     var iframe = jQuery('<iframe id="AppletFrame" src="about:blank"></iframe>');

     var doc = document.getElementById('AppletFrame').contentWindow.document;
     doc.open();
     doc.write('<script>');
     doc.write('var attributes = {code:"com.test.MyApplet", width:400, height:375};');
     doc.write('var parameters = {jnlp_href: "http://'+window.location.host+'/applications/MyConfigApplet.jnlp", user: "'+user+'", pass: "'+pass+'", name: "'+name+'", hash: "'+hash+'", port: "'+port+'"};');
     doc.write('</script>');
     doc.write('deployJava.runApplet(attributes, parameters, "1.6");');
     doc.close();

      var $dialog = jQuery('<div></div>');
     $dialog.append(iframe);
     $dialog.dialog({
         title: name,
         width: '425',
         height: '400',
         modal: true,
         close: function () {
             iframe.attr("src", "");
         }
     });
 }

Basically I've tried to add contents of the applet.html in my working example to the code. I see no errors and the only thing that comes up is an empty iframe. I guess this doesn't actually apply to the src attribute. What am I doing wrong?

EDIT: As suggested by @TheZuck I added deployJava.js with:

doc.write('<script src="https://www.java.com/js/deployJava.js"></script>')

Now at least I get an error: TypeError: document.getElementById(...) is null

Why?

Have you tried just including the applet directly into the parent page instead of an iframe? You might get more useful feedback about where it's going wrong. Have you tried making that code run onDomReady instead of immediately on inclusion? — Kato, May 01 '13 at 19:27
@Kato I can just load applet.html on the parent page and it works fine. Even that first part of my question where I put it into an iframe and then show it in a dialog works good as well. — Tom, May 01 '13 at 19:56
@TheZuck No, I put that on my main page in the header. It's loaded. — Tom, May 01 '13 at 20:49
an iframe is a separate entity, it's not enough to load it in your main page, it needs to be there as well... — TheZuck, May 02 '13 at 05:08
@TheZuck is right, you need to make sure all your dependent scripts are already being loaded on the iframe page. not the parent page. — klewis, May 02 '13 at 13:17

score 0 · Accepted Answer · answered May 02 '13 at 19:57

I have no idea why but nothing I do will get the code to work. I've abandoned trying to write content to the src and decided to write a query string to pass parameters to the applet itself:

var iframe = jQuery('<iframe id="AppletFrame" width="435" height="410" frameborder="0" src="http://myurl.com/applications/applet.php?user='+user+'&pass='+pass+'&name='+name+'&hash='+hash+'&port='+port+'"></iframe>');

This works but not sure if this is the most elegant solution.

Add javascript to iframe src attribute

1 Answers1