1

我有一堆如果 DIV，每个都包含一些文本、一个 Java 小程序（糟糕...）和一些按钮；现在我正在实现一个动态显示和隐藏这些 DIV 的搜索功能，但是每当我将 display:none 设置为 DIV 时，其中的小程序就会立即被销毁，就好像它已从 html 代码中删除一样，然后在再次显示 DIV。有没有办法防止这种情况？

4

3 回答 3

1

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

不要调用元素display: none。div尝试visibility:hidden;改用，或应用一种将小程序移出可见页面的样式。像这样的东西1：

<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>
  1. 在 FF 中测试，但未经验证。
于 2013-08-11T15:54:03.267 回答
1

也许不幸的是，您描述的行为正是这些天浏览器的行为。

您仍然可以隐藏小程序，但不能通过隐藏它的父 div 来做到这一点。

首先，您必须将 Web UI 元素放入与 applet 的 div 不同的 div 中。您可以按照您的描述隐藏 Web UI 元素（设置“显示：无”）。但是要隐藏 Java 小程序，您需要在小程序元素上设置样式“width: 0px; height: 0px”。

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

一个隐藏的小程序元素如下所示：

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

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

要记住的事情：

  • 包含小程序的 <div> 必须可见...否则小程序将无法加载
  • <applet width="0px" height="0px" > 不会在 Chrome 中加载小程序。
  • 在小程序的 <div> 上设置“显示：无”会导致小程序卸载（如您所见）
  • 在 <applet> 上设置属性 width=0 和 height=0 会导致小程序在 Chrome 中卸载。
  • 设置 .style.width 和 .style.height 与设置 .width 和 .height 不同。
  • 设置 .style.width=0 和 .style.height=0 使 <applet> 不可见。
于 2014-02-15T10:59:14.690 回答
0

根据您的站点布局，您可以使用一些简单的 css 在小程序顶部放置一个 iframe，并将颜色设置为您的背景。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'
    } 
}
于 2013-10-25T18:56:31.537 回答