2015-05-14 5 views
4

Вот моя ситуация.Скрыть содержимое внутри iframe?

У меня есть файл с именем iframe.html. который имеет код ниже,

<!DOCTYPE html> 
<html lang="eng"> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>Pluign Development</title> 

     <script src="js/jquery-1.11.0.js" type="text/javascript"></script> 
    </head> 

    <body> 

     <iframe id="abc" src="test.html"></iframe> 
     <div id="sub">click</div> 
    </body> 

    <script src="js/script-22.js" type="text/javascript"></script> 
</html> 

и у меня есть файл test.html. который имеет код ниже,

<!DOCTYPE html> 
<html lang="eng"> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>Pluign Development</title> 

    </head> 

    <body> 

     <div id="red">prasanga karunanayake </div> 
    </body> 


</html> 

здесь JS код, что я попробовал,

(function($){ 

    var fire = { 
     init:function(){ 
      $('#sub') 
      .on('click', function(){ 
       $('#red', parent.document).css('display','none'); 
      }); 
     } 
    }; 
    fire.init(); 

}(jQuery)); 

Вот моя ситуация.

Мне нужно скрыть <div id="red">prasanga karunanayake </div>, который находится в файле test.html. если я нажму <div id="sub">click</div>, тогда скройте содержимое html, которое находится в файле test.html.

Я в значительной степени смущен, Ваша помощь приветствуется.

+0

Я подозреваю, что скрытие самого iframe не может быть и речи? –

+0

Вы имеете в виду, что вам нужно скрыть '

prasanga karunanayake
' при нажатии '
click
' и ничего больше? –

+0

попробуйте этот $ ('# red', window.parent.document) .css ('display', 'none'); – talsibony

ответ

0

Вы пробовали

$('#sub') 
    .on('click', function(){ 
     $('iframe #red').css('display','none'); 
    }); 

EDIT Сначала принести событие, когда IFrame загрузится, а затем создать обработчик событий для захвата кликов на #sub DIV, и, наконец, найти красный в загруженном IFRAME и скрыть его

$(function(){ 
      var f=$('#abc') 
      f.load(function(){ 
        $("#sub").click(function(){ 
        f.contents().find('#red').hide(); 
        }); 

      }) 
     }) 
+0

см. Отредактированный ответ – Lukesoft

+0

Спасибо за ваш ответ, но вот что мне нужно, чтобы скрывать содержимое html. если я нажму div. – Prasanga

+0

извините, отредактируйте – Lukesoft

-2

вы не можете скрыть то, что в IFrame сам по себе, но вы можете скрыть IFRAME, изменив СРК, как это:

$('#sub') 
     .on('click', function(){ 
      $('#abc').attr('src',''); 
     }); 
7

Вы можете использовать .contents() таким образом:

$('#abc').contents().find('#red').hide(); 

Другое дело, как вы обернули свой код закрытия, который работает как ответ страницы получает в браузере. Таким образом, возможно, что это изменение кода не сработает.

Вместо я предлагаю вам поставить готовый блок Dóm также для этого:

(function($){ 
    $(function(){ // <---add this block from here to 
     var fire = { 
     init:function(){ 
      $('#sub').on('click', function(){ 
       $('#abc').contents().find('#red').hide(); 
      }); 
     } 
     }; 
     fire.init(); 
    }); //<----here 
}(jQuery)); 
+0

спасибо. за работой. – Prasanga

0

Я попробовал все ответы выше, но ничего, кажется, работает, но я нашел способ, как это:

положить Функция Iframe внутри DIV и скрыть его по щелчку

<!DOCTYPE html> 
<html lang="eng"> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>Pluign Development</title> 

     <script src="jquery-1.11.3.min.js" type="text/javascript"></script> 
     <script src="js.js" type="text/javascript"></script> 
    </head> 

    <body> 
     <div class="toHide"> 
      <iframe id="abc" src="test.html"></iframe> 
     </div> 
     <div id="sub">click</div> 

    </body> 


</html> 

и код, чтобы скрыть это:

$(document).ready(function(e) { 
    $('#sub').click(function(){ 
     $(".toHide").html(''); 
    }); 

    $('#sub').click(); 
}); 

или

$(document).ready(function(e) { 
    $('#sub').click(function(){ 
     $(".toHide").css({"display":"none"}); 
    }); 

    $('#sub').click(); 
}); 

также, пожалуйста, обратите внимание, что вы кладете файл JS вне тела, вы можете поместить его внутри тега тела или в голове, как я сделал

1

Если страница загружается в iframe не находится в том же домене, что и родительский фрейм, тогда это невозможно с использованием JavaScript или CSS.

Это функция безопасности, реализованная в веб-браузерах для предотвращения XSS (межсайтовый скриптинг).

Смежные вопросы