Загадка прозрачности: iframe не прозрачный в Chrome и IE, но в Firefox

0

У меня простой сценарий:

http://jsfiddle.net/akosk/t2KvE/8/

HTML

<div id='base'>
    <iframe id="myFrame" src="about:blank" frameborder="0" allowTransparency="true"></iframe>    
</div>

<script id="content" type="text/html">
    <html>
        <head>
            <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
        </head>
        <body>                                       
            <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus architecto quasi deleniti eius praesentium non officia culpa corporis officiis perferendis laudantium placeat excepturi. Voluptatum fuga mollitia reiciendis non aliquam dolorem!</h2>              
        </body>
    </html>
</script>

JS

    var myFrame = $("#myFrame");
    var content = $("#content").html();
    myFrame.contents().find('html').html(content);

CSS

iframe {
    z-index:0;
    height:100px;
}
#base {
    background-color:red;
    height:100px;
    z-index:-1;
}

В Chrome & IE цвет фона iframe белый, а не цвет обертки (красный). В Firefox он отлично работает.

Кроме того, при проверке элемента в Chrome нет узлов HEAD и BODY в iframe.

Когда я удаляю css (bootstrap), тогда все работает нормально. Так или иначе, если я пишу что-нибудь в HEAD (например, любой css!), Прозрачность не работает, а теги HEAD/BODY исчезают.

(Я попытался с * {background-color: transparent} в iframe также безуспешно. Думаю, проблема в другом)

Это огромная тайна для меня.

Может кто-нибудь мне помочь?

Теги:

2 ответа

0
Лучший ответ

внесите следующие изменения в код

//script

var myFrame = $("#myFrame");
var content = $("#content").html();
myFrame.contents().find('body').html(content);
//change html to body here there by setting the content of body

исправления css

ниже линии, в которой подключен внешний бутстрап, добавьте следующую строку

 <head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
    <style> BODY {background:none transparent !important}</style>
</head>
Поделиться
  • 0
    Благодарю вас! Ключ был: .find ('body') "вместо .find ('html'). Однако он не идеален, потому что он помещает ссылку и стиль в раздел body. Поэтому я разделил его и сначала установил head, а затем установил body: jsfiddle.net/akosk/t2KvE/57 Кажется, я не могу поместить весь документ в элемент iframe html, если он содержит содержимое в элементе head.
0

http://jsfiddle.net/t2KvE/31/
С упрощением кода я не смог воспроизвести это.

iframe {
  height:100px;
}
#base {
  background-color:red;
  height:100px;
}

Так как вы добавили bootstrap.min.css, который устанавливает белый фон на теле. Вы просто делаете

iframe body {background-color: transparent;}

Поэтому он является фоном тела и не связан с iframe.

Поделиться
  • 0
    Если я снимаю все с головы, то все работает нормально. Вот почему ваш код работает. Попробуйте добавить что-нибудь в раздел head, это не удастся: [ jsfiddle.net/akosk/t2KvE/58/]
  • 0
    Это то, на что я указываю. У загрузочного CSS-кода, добавленного в заголовок iframe, есть тело стиля {background: #fff;}. Если вы делаете iframe body {background: transparent;} в своем основном CSS (не в iframe), вы переопределяете его.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню