Question

我有一个iframe，后面会显示最初使用类隐藏的div。当我从容器div中删除该类时，它内部的所有内容都会显示出来。但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中工作。在其他主流浏览器中，它工作正常。

Answer 1

您使用的是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。希望它有所帮助！

Answer 2

删除课程后重新加载页面是我到目前为止找到的最佳解决方案。

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

IE中显示iframe中隐藏的文本框不显示

2 个答案: