IEで表示されているときにiframe内に隠されたテキストボックスが表示されない

divを含むiframeには、最初にクラスを使用して非表示にすることがあります。コンテナdivからクラスを削除すると、その中のすべてが表示されます。 iframe内のテキストボックスは表示されません。IEで表示されているときにiframe内に隠されたテキストボックスが表示されない

parent.htm

<style> 
    .hide 
    { 
     display: none; 
    } 
</style> 
<script> 

    function showSearchWindow(show) { 
     if (show) { 
      $('div.overlay').removeClass('hide'); 
     } 
     else { 
      $('div.overlay').addClass('hide'); 
     } 
    } 

</script> 

<form id="form1"> 
<div class='overlay hide'> 
    <input type="text" id='txt1' value='test1' /> 
    <iframe id="frame" src="frame.htm"></iframe> 
</div> 
<input type="button" id='btnShow' value='Show' onclick='showSearchWindow(true)' /> 
<input type="button" id='btnHide' value='Hide' onclick='showSearchWindow(false)' /> 
</form>

frame.htm

//Reference to jQuery 1.4.1 js file 

<form id="form1"> 
    <input type="text" id='txt2' value='test'/> 
</form>

私はクリック 'btnShow'、 'TXT1' を示しているが、 'TXT2は' 示されていません。 IE 7,8,9では動作しませんでした。他の主要なブラウザではうまく動作します。

出典

2012-01-31 sajith

IE8でこのコードをテストしましたが、うまくいきます。 –

@ e-zincはい、あなたは正しいです。私がjQuery jsファイルをframe.htm – sajith

クラスを削除した後にページを再読み込みすることは、これまでに私が見つけた最良の解決策です。

function showSearchWindow(show) { 
    if (show) { 
     $('div.overlay').removeClass('hide'); 
    $('#frame').attr('src', 'frame.htm'); 
    } 
    else { 
     $('div.overlay').addClass('hide'); 
    $('#frame').attr('src', 'about:blank'); 
    } 
} 

<iframe id="frame" src="about:blank"></iframe

出典

2012-02-01 07:28:03 sajith

jQueryを使用していますか？

$('div.overlay').removeClass('hide')は純粋なJavaScriptではありません。純粋なJavaScriptを使用して

ソリューションは、次のようになります。

<html> 
<head> 
    <style> 
    .hide { display: none; } 
    </style> 
    <script> 
    function showSearchWindow(show) { 
     document.getElementById("mydiv").className = (show ? "" : "hide"); 
    } 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <div class='hide' id='mydiv'> 
    <input type="text" id='txt1' value='test1' /> 
    <iframe id="frame" src="frame.htm"></iframe> 
    </div> 
    <input type="button" id='btnShow' value='Show' onclick='showSearchWindow(true)' /> 
    <input type="button" id='btnHide' value='Hide' onclick='showSearchWindow(false)' /> 
    </form> 
</body> 
</html>

私が行った変更は、クラス名を設定するdocument.getElementById("mydiv").classNameを使用しています。 class=overlayではなくid=mydivを使用してdivにアクセスします。

これはFF9で動作します。それが役に立てば幸い！

出典

2012-01-31 13:26:48

から参照すると、jQueryの問題ではありません。それはIEのバグと思われる。私が感じることは、IEはすべての子孫にスタイルを適用し、クラスを削除するとコンテナからのみスタイルが削除され、子孫にはそのスタイルが適用されているということです。 – sajith

IEで表示されているときにiframe内に隠されたテキストボックスが表示されない

答えて

関連する問題