How can I embed a Java applet dynamically with Javascript?

Question

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.setAttribute("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);
}

Beachhouse · Accepted Answer · 2012-09-26 21:55:45Z

3

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.

answered Sep 26, 2012 at 21:55

Beachhouse

5,0623 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Koffy Over a year ago

Thank you for the very clear answer +1. Tho, I just want it known to all that the '.class' to the "app.code" value is no longer necessary.

Carl Smotricz · Accepted Answer · 2010-07-15 19:56:39Z

1

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.

answered Jul 15, 2010 at 19:56

Carl Smotricz

68k18 gold badges129 silver badges170 bronze badges

1 Comment

Jonathan Over a year ago

Hi, Thanks for your suggestions! The IFrame idea is a good one, and I'll probably use that if I can't get the dynamic insertion to work. I did look at the DOM in IE after inserting the applet, and it's very strange. When inserting the applet, I can see the containing div expand somewhat to accommodate the applet, but the code never appears in the DOM, and the applet is never executed. I have no idea why this happens...

Anthony · Accepted Answer · 2013-02-12 23:10:25Z

1

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>

answered Feb 12, 2013 at 23:10

Anthony

12.9k13 gold badges68 silver badges92 bronze badges

2 Comments

Bruno Medeiros Over a year ago

This javascript library uses document.write(), which overrides the whole document. See my answer to find out how to fix it.

SineSwiper Over a year ago

This may have been fixed in a later version.

Bruno Medeiros · Accepted Answer · 2013-10-02 18:26:40Z

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.

user3303635 · Accepted Answer · 2014-04-03 16:14:33Z

0

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.

answered Apr 3, 2014 at 16:14

user3303635

1

Comments

de.coding.myth · Accepted Answer · 2014-07-03 16:38:47Z

0

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>

answered Jul 3, 2014 at 16:38

de.coding.myth

1251 silver badge10 bronze badges

Collectives™ on Stack Overflow

How can I embed a Java applet dynamically with Javascript?

6 Answers 6

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related