html - Java Applet z-index on Safari and beyond

Question

Welcome To Ask or Share your Answers For Others

html - Java Applet z-index on Safari and beyond

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

A well known problem with Java Applets in webpages is that browsers ignore the z-index of the applet tag vs. other components in the page. No matter how you position and z-index elements in the page, applets will draw themselves on top of everything.

There is a workaround, known as the iframe shim, as described here: http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/.

However, this workaround does not work in Safari 3 or 4 in Windows (assuming the same for Mac).

Does anyone know a way to make it work in Safari?

Does anyone have ideas about how to pressure Sun to fix the underlying problem so we can avoid clumsy shims? Here is a bug report on the issue, http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=6646289, notice that it has been open for a year, however other bug reports go back many many years.

This is so frustrating, don't Sun understand that this is the very sort of thing that has marginalized Java as a way of doing cool stuff in the browser? I love you Java, but you are not helping your situation...

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

457 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:18:19+0000

There is a tricky solution for the problem. It's not necessary to have the code inside an iframe. We can have a dummy iframe just as a layer above the applet. And then an absolute div with the text can easily placed above that iframe.

working example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Applet z index issue</title>
<style>

.applet {width:400px; margin:0 auto; text-align:center; border:1px solid #000; left:40%; position:absolute }
.iframe {width:400px;  background:#fff; position:absolute; border:1px solid #f00; position:absolute; left:45%; top:20px; z-index:9; height:201px;}
.message { width:250px; border:1px solid #000; background:#fff; height:150px; color:#fff; text-align:center;  z-index:99; background:#555;  float:left; position:absolute; left:45%; top:20px}

 </style>
</head>

<body>
<div class="message">Message</div>
<div class="iframe"><iframe style="width:500px; height:205px; background:none; border:none"> </iframe></div>
<div class="applet">

<applet code="Bubbles.class" width="400" height="350">
Java applet that draws animated bubbles.
</applet>

</div>

</body>
</html>

Categories

html - Java Applet z-index on Safari and beyond

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags