How can I embed a Java applet dynamically with Javascript?

I want to be able to insert a Java applet into a web page dynamically using a Javascript function that is called when a button is pressed. (Loading the applet on page load slows things down too much, freezes the browser, etc...) I am using the following code, which works seamlessly in FF, but fails without error messages in IE8, Safari 4, and Chrome. Does anyone have any idea why this doesn't work as expected, and how to dynamically insert an applet in a way that works in all browsers? I've tried using document.write() as suggested elsewhere, but calling that after the page has loaded results in the page being erased, so that isn't an option for me.

function createPlayer(parentElem)
{
    // The abc variable is declared and set here

    player = document.createElement('object');
    player.setAttribute("classid", "java:TunePlayer.class");
    player.setAttribute("archive", "TunePlayer.class,PlayerListener.class,abc4j.jar");
    player.setAttribute("codeType", "application/x-java-applet");
    player.id = "tuneplayer";
    player.setAttribute("width", 1);
    player.setAttr开发者_Python百科ibute("height", 1);

    param = document.createElement('param');
    param.name = "abc";
    param.value = abc;
    player.appendChild(param);

    param = document.createElement('param');
    param.name = "mayscript";
    param.value = true;
    player.appendChild(param);

    parentElem.appendChild(player);
}

document.write()

Will overwrite your entire document. If you want to keep the document, and just want an applet added, you'll need to append it.

var app = document.createElement('applet');
app.id= 'Java';
app.archive= 'Java.jar';
app.code= 'Java.class';
app.width = '400';
app.height = '10';
document.getElementsByTagName('body')[0].appendChild(app);

This code will add the applet as the last element of the body tag. Make sure this is run after the DOM has processed or you will get an error. Body OnLoad, or jQuery ready recommended.

I would have suggested doing something like what you're doing; so I'm baffled as to why it's not working.

Here's a document that looks pretty authoritative, coming from the horse's mouth as it were. It mentions the idiosyncrasies of different browsers. You may end up needing to do different tag soups for different implementations.

But maybe there's something magic about applet/object tags that keeps them from being processed if inserted dynamically. Having no more qualified advice, I have a crazy workaround to offer you: Howzabout you present the applet on a different page, and dynamically create an IFRAME to show that page in the space your applet should occupy? IFRAMEs are a bit more consistent in syntax across browsers, and I'd be surprised if they were to fail the same way.

Maybe you should use your browser's debugging tools to look at the DOM after you swap in your applet node. Maybe it's not appearing where you think it is, or not with the structure you think you're creating. Your code looks OK to me but I'm not very experienced with dynamic applets.

There is a JavaScript library for this purpose: http://www.java.com/js/deployJava.js

// launch the Java 2D applet on JRE version 1.6.0
// or higher with one parameter (fontSize)
<script src=
    "http://www.java.com/js/deployJava.js"></script>
<script>
    var attributes = {code:'java2d.Java2DemoApplet.class',
        archive:'http://java.sun.com/products/plugin/1.5.0/demos/plugin/jfc/Java2D/Java2Demo.jar',
        width:710, height:540} ;
    var parameters = {fontSize:16} ;
    var version = '1.6' ;
    deployJava.runApplet(attributes, parameters, version);
</script>

I did something similar to what Beachhouse suggested. I modified the deployJava.js like this:

writeAppletTag: function(attributes, parameters) {
    ...

    // don't write directly to document anymore
    //document.write(startApplet + '\n' + params + '\n' + endApplet);

    var appletString = startApplet + '\n' + params + '\n' + endApplet;
    var divApplet = document.createElement('div');

    divApplet.id = "divApplet";
    divApplet.innerHTML = appletString;
    divApplet.style = "visibility: hidden; display: none;";

    document.body.appendChild(divApplet);
}

It worked ok on Chrome, Firefox and IE. No problems so far.

I tried at first to have a div already created on my html file and just set its innerHTML to the appletString, but only IE were able to detect the new applet dynamically. Insert the whole div direclty to the body works on all browsers.

Create a new applet element and append it to an existing element using appendChild.

var applet = document.createElement('applet');
applet.id = 'player';

...

var param = document.createElement('param');

...

applet.appendChild(param);
document.getElementById('existingElement').appendChild(applet);

Also, make sure the existing element is visible, meaning you haven't set css to hide it, otherwise the browser will not load the applet after using appendChild. I spent too many hours trying to figure that out.

This worked for me:

// my js code
    var app = document.createElement('applet');
    app.code= 'MyApplet2.class';
    app.width = '400';
    app.height = '10';

    var p1 = document.createElement('param');
    p1.name = 'sm_UnwindType';
    p1.value='200';
    var p2 = document.createElement('param');
    p2.name = 'sm_Intraday';
    p2.value='300';

    app.appendChild(p1);
    app.appendChild(p2);

    var appDiv = document.getElementById('applet_div');
    appDiv.appendChild(app);

-----html code:

<div id="applet_div"></div>