скрытое текстовое поле внутри iframe не отображается при отображении в IE - PullRequest
Новая
       1

скрытое текстовое поле внутри iframe не отображается при отображении в IE

0 голосов
/ 31 января 2012

У меня есть 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. В других основных браузерах он работает нормально.

Ответы [ 2 ]

0 голосов
/ 01 февраля 2012

Перезагрузка страницы после удаления класса - лучшее решение, которое я нашел до сих пор. 

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
0 голосов
/ 31 января 2012

Вы используете 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 для установки имени класса. Я также получаю доступ к div, используя id=mydiv вместо class=overlay.

Это работает в FF9. Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...