Задать вопрос
@vinegred

Возможно ли CSS привязать к iframe?

Хочу скрыть div только когда он внутри iframe. Но почему то не работает. Может есть какие то ограничения?

<div class="landingWrapperMy">
    <iframe src="http://yandex.ru/" frameborder="0" seamless>
      <div id="yandex"></div>
    </iframe>
</div>

iframe #yandex {
display: none;
}


Помогите, пожалуйста.
  • Вопрос задан
  • 1269 просмотров
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка 3.0
    3 месяца
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 3
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Было уже. Решение.
Копайте в сторону jQuery:
$('iframe').contents().find('.hidden').hide();

UPD: Пришлось выложить код работающего примера кодом, так как сайты для кода не понимают меня)))

Итак, два файла: index.html и frame.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style media="screen">
        body { background-color: blue; }
        #iframe1 { width: 400px; height: 400px; }
        #iframe2 { width: 400px; height: 400px; }
        #iframe3 { display: none; width: 400px; height: 400px; }
        .open_iframe { display: block; color: white; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.open_iframe').click(function(){
            $('#iframe3').toggle();
            $('#iframe3').contents().find('.click').hide();
        });
    });
    $(window).load(function() {
        $('#iframe2').contents().find('.load').hide();
    });
    </script>
</head>
<body>
    <span class="open_iframe">Нажми меня.</span>
    <iframe id="iframe1" src="iframe.html" width="" height=""></iframe>
    <iframe id="iframe2" src="iframe.html" width="" height=""></iframe>
    <iframe id="iframe3" src="iframe.html" width="" height=""></iframe>
</body>
</html>


И iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style media="screen">
        body { background-color: red; }
        .load { background-color: yellow; }
        .click { background-color: purple; }
    </style>
</head>
<body>
    Это один и тот же фрейм.
    <div class="load">
        А этого контента не видно при загрузке.
    </div>
    <div class="click">
        А этого контента не видно по клику.
    </div>
</body>
</html>


На выходе видим, как скрыть блок при загрузке страницы и при клике на блок.
Ответ написан
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Изменять содержимое чужого фрейма нельзя!
Ответ написан
krimtsev
@krimtsev
Вы не поверите, но буквально 5 минут назад мы думали о таком костыле Как поставить свою миниатюру на Google Maps?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
FoodSoul Калининград
от 180 000 до 250 000 ₽
Data Directs Тель-Авив
от 350 000 ₽