可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I embed iframe element in my HTML page:

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

applet.html looks like this:

<html>
<head>
</head>

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

The problem is: how to display a div element (with position: absolute) over a Java applet which is inside iframe.

I tried to use another iframe element:

<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>

Works fine in IE, Firefox but not in Chrome.

回答1:

I found an article that seems to provide a solution, so I'll not claim the credit for coming up with it:

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

From the article:

The solution is to have a third Iframe C within Iframe A. Iframe C has a z-index within Iframe A that is higher than the z-index of the Applet. It is positioned so that it's rectangle as considered by the top page is identical to that of the Iframe B overlay.

I pasted second IFrame code from your main page into applet.html like so:

<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>

And it seemed to do the trick in chrome.

I did get a frame border but i'm guessing this is fixable. Give it a go.

回答2:

This problem is partly solved with latest updates, at least on MacOSX:

I tested DIVs with fancy CSS effects like opacity, shadows and round corner over an applet, it is working well in Safari, Firefox 11 and Chrome 19: no issue in the composition, no glitches.. no iframes!

It is still broken on Ubuntu, though. Really frustrating. I don't know for Windows?