Как отобразить <div> через Java-апплет в Chrome

Я вставляю iframe-элемент в свою HTML-страницу:

<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>

applet.html выглядит следующим образом:

<html>
<head>
</head>

<body>
    <applet code="ClockApplet.class" width="100%" height="100%">
    </applet>
</body>
</html>

Проблема заключается в следующем: как отобразить элемент div (с положением: абсолютный) над апплетом Java, который находится внутри iframe.

Я попытался использовать другой элемент iframe:

<html>
<head>

</head>
<body>
    <iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>

    <iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 99"></iframe>
    <div style="position: absolute; top: 10px; left: 10px; background-color: gray; height: 150px; width: 150px; z-index: 100">Hello World</div>
</body>
</html>

Хорошо работает в IE, Firefox, но не в Chrome.

Ответы

Ответ 1

Я нашел статью, которая, кажется, предоставляет решение, поэтому я не буду требовать кредита для этого:

http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/

Из статьи:

Решение состоит в том, чтобы иметь третий Iframe C внутри Iframe A. Iframe C имеет z-индекс в Iframe A, который выше чем z-индекс апплета. это позиционируется так, чтобы он рассмотренный на верхней странице идентичная той, что и Iframe B наложение.

Я вставил второй код IFrame со своей главной страницы в applet.html, например:

<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 1"></iframe>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>

И это казалось хитростью в хроме.

Я получил рамку рамки, но я предполагаю, что это исправление. Дайте ему пойти.

Ответ 2

Эта проблема частично решена с помощью последних обновлений, по крайней мере, на MacOSX:

Я тестировал DIVs с эффектными эффектами CSS, такими как непрозрачность, тени и круглый угол над апплетом, он хорошо работает в Safari, Firefox 11 и Chrome 19: никаких проблем в композиции, никаких сбоев.. без iframes!

Тем не менее, он все еще разбит на Ubuntu. Действительно расстраивает. Я не знаю, для Windows?