iframe中隱藏的文本框在IE中顯示時不顯示

我有一個包含div的iframe，稍後會顯示，最初使用類隱藏。當我從容器div中移除該類時，其中的所有內容都會顯示出來。但iframe內的文本框未顯示。iframe中隱藏的文本框在IE中顯示時不顯示

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中，它工作正常。 – 2012-01-31 11:28:12

@ e-zinc是的，你是正確的。它從frame.htm – sajith 2012-02-01 07:23:59

刪除類後重新加載頁面是我找到的最佳解決方案。

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設置類名所做的更改。我也使用id=mydiv而不是class=overlay訪問div。

這適用於FF9。希望能幫助到你！

來源

2012-01-31 13:26:48

引用jQuery js文件開始發生。不是jQuery問題。它似乎是IE錯誤。我覺得IE是將風格應用於所有後代，當我刪除該類時，它只從容器中刪除樣式，後代仍然應用了該樣式。 – sajith 2012-02-01 05:10:17

iframe中隱藏的文本框在IE中顯示時不顯示

回答

相關問題