DIVの場合、それぞれにテキスト、Javaアプレット(うん...)、およびいくつかのボタンが含まれています。現在、これらの DIV を動的に表示および非表示にする検索機能を実装していますが、display:none を DIV に設定すると、そのアプレットは、html コードから削除されたかのようにすぐに破棄され、 DIV が再び表示されます。これを防ぐ方法はありますか?
3 に答える
おそらく残念ながら、あなたが説明している動作は、まさに最近のブラウザーの動作です。
アプレットを非表示にすることはできますが、親 div を非表示にすることはできません。
まず、Web UI 要素をアプレットの div とは別の div に配置する必要があります。説明どおりに Web UI 要素を非表示にすることができます (「display: none」を設定)。ただし、Java アプレットを非表示にするには、スタイル「幅: 0px; 高さ: 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> に「display: none」を設定すると、アプレットがアンロードされます (発見したとおり)。
- <applet> で属性 width=0 および height=0 を設定すると、Chrome でアプレットがアンロードされます。
- .style.width と .style.height の設定は、.width と .height の設定と同じではありません。
- .style.width=0 と .style.height=0 を設定すると、<applet> が非表示になります。
サイトのレイアウトに応じて、簡単な 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'
}
}