Question

我有一堆DIV，每个都包含一些文本，一个java applet（yuck ......）和一些按钮;现在我正在实现一个动态显示和隐藏这些DIV的搜索功能，但每当我将display：none设置为DIV时，立即销毁它中的applet，就像它从html代码中删除一样，然后重新创建时DIV再次显示。有办法防止这种情况吗？

Answer 1

有没有办法阻止这种情况？

不要在display: none元素上调用div。请尝试使用visibility:hidden;，或应用将applet从可见页面移开的样式。像¹这样的东西：

<html>
<head>
<title>Removing elements from view</title>
<style type='text/css'>
.plain {
}
.removed {
    position: absolute;
    left: -1200px;
    top: -1200px;
}
</style>
<script type='text/javascript'>
function show() {
    document.getElementById('target').className='plain';
}
function hide() {
    document.getElementById('target').className='removed';
}
var count=0;
function increment() {
    count++;
    document.getElementById('output').value=count;
}
window.setInterval(function(){increment()}, 1000);
</script>
</head>
<body>
<h1>Move the element off page</h1>
<input type='button' value='Hide' onclick='hide();'>
<div id='target' style='background-color:#F00;'>
<input id='output' type='text' size='4'>
</div>
<input type='button' value='Show' onclick='show();'>
</body>
</html>

在FF中测试，但未经过验证。

Answer 2

或许不幸的是，您描述的行为正是浏览器的行为。

你仍然可以隐藏applet，但你不能通过隐藏它的父div来实现它。

首先，您必须将Web UI元素放入与applet的div分开的div中。您可以在描述时隐藏Web UI元素（设置“display：none”）。但要隐藏Java小程序，可以在applet元素上设置样式“width：0px; height：0px”。

设置小程序的样式的宽度和高度非常重要，而不是小程序的宽度和高度属性。

隐藏的applet元素如下所示：

<applet id="myHidableApplet"
        width="600px" height="400px"
        style="width: 0px; height: 0px;">

请注意......
- 小程序的样式指定"width: 0px height: 0px"，而
- 小程序的属性指定width="600px" height="400px。

可见组可能如下所示：

<div id="group1">
    <applet id="group1applet"
            width="600px" height="400px"
            style="width: 600px; height: 400px;">    <!-- visible -->
        <param> etc... </param>
    </applet>
    <div id="group1ui" style="display: block">       <!-- visible -->
        <input name="Name" type="text" />
    </div>
</div>

隐藏群组时，您必须将其转换为以下内容：

<div id="group1">
    <applet id="group1applet"
            width="600px" height="400px"
            style="width: 0px; height: 0px;">    <!-- hidden -->
        <param> etc... </param>
    </applet>
    <div id="group1ui" style="display: none">    <!-- hidden -->
        <input name="Name" type="text" />
    </div>
</div>

我发现宽度和高度元素属性与宽度和高度样式属性之间的这种微妙但有用的区别，同时试图找出一种部署完全隐藏的方法小程序。我的applet没有UI。我的JavaScript只需调用applet中的方法，当它需要执行某些在JavaScript中实现时不切实际的操作或计算时。有时这被称为JAHA，JavaScript和隐藏的小程序。

要记住的事情：

＆lt; div＆gt;包含applet必须是可见的...否则applet将无法加载
＆lt; applet width =“0px”height =“0px”＆gt;不会在Chrome中加载小程序。
在小程序的＆lt; div＆gt;上设置“display：none”导致applet卸载（如你发现的那样）
在＆lt; applet＆gt;上设置属性width = 0和height = 0导致小程序在Chrome中卸载。
设置.style.width和.style.height与设置.width和.height不同。
设置.style.width = 0和.style.height = 0使＆lt; applet＆gt;不可见的。

Answer 3

根据您的网站布局，您可以使用一些简单的CSS将iframe放置在applet的顶部，并将颜色设置为您的背景。 http://jsfiddle.net/tQL93/3/

<iframe id="iframe_shim" class="iframe_shim" frameBorder="0">
</iframe>

<div class='applet'>
</div>

<button id='hideBtn' type="button" title="Hide Applet" style="width:100px;" 
onclick="hideApplet();">Hide</button>


function hideApplet(){
    var el = document.getElementById('hideBtn');
    if (el.innerHTML == 'Hide'){
        el.innerHTML = 'Show'
        document.getElementById('iframe_shim').style.display = 'block'
    } else {
        el.innerHTML = 'Hide'        
        document.getElementById('iframe_shim').style.display = 'none'
    } 
}

隐藏容器时防止java applet被销毁

3 个答案: