У меня простой сценарий:
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 также безуспешно. Думаю, проблема в другом)
Это огромная тайна для меня.
Может кто-нибудь мне помочь?
внесите следующие изменения в код
//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>
http://jsfiddle.net/t2KvE/31/
С упрощением кода я не смог воспроизвести это.
iframe {
height:100px;
}
#base {
background-color:red;
height:100px;
}
Так как вы добавили bootstrap.min.css, который устанавливает белый фон на теле. Вы просто делаете
iframe body {background-color: transparent;}
Поэтому он является фоном тела и не связан с iframe.