Iframe наследует от родителя - PullRequest
Новая
       5

Iframe наследует от родителя

42 голосов
/ 06 января 2011

Как сделать так, чтобы <iframe> наследовал стили и javascript его родителя.

Я пытался 

var parentHead = $("head", parent.document).html();
$("head").html(parentHead);

Но он удаляет теги <script>. Более того, я не вижу стилей, влияющих на мой iframe.

Есть ли лучший / любой другой подход к этому, который я пропускаю? Благодаря.

Ответы [ 4 ]

47 голосов
/ 06 января 2011

Вы можете «наследовать» CSS родительского элемента, имея такой код в iframe: 

<head>
<script type="text/javascript">
window.onload = function() {
    if (parent) {
        var oHead = document.getElementsByTagName("head")[0];
        var arrStyleSheets = parent.document.getElementsByTagName("style");
        for (var i = 0; i < arrStyleSheets.length; i++)
            oHead.appendChild(arrStyleSheets[i].cloneNode(true));
    }
}
</script>
</head>

У меня нормально работало в IE, Chrome и Firefox.

Что касается JavaScript, Я не смог найти способ добавить родительский JavaScript напрямую в iframe, однако вы можете добавить parent. в любом месте, чтобы использовать JS из родительского, например: 

<button type="button" onclick="parent.MyFunc();">Click please</button>

Это вызовет функцию с именем MyFunc, определенную на родительской странице при нажатии кнопки.

22 голосов
/ 29 января 2015

Вот мое «лучшее из» решение для добавления стилей родителя iframe (не сценариев). Он работает с IE6-11, Firefox, Chrome, (старой) Opera и, вероятно, везде. 

function importParentStyles() {
    var parentStyleSheets = parent.document.styleSheets;
    var cssString = "";
    for (var i = 0, count = parentStyleSheets.length; i < count; ++i) {
        if (parentStyleSheets[i].cssRules) {
            var cssRules = parentStyleSheets[i].cssRules;
            for (var j = 0, countJ = cssRules.length; j < countJ; ++j)
                cssString += cssRules[j].cssText;
        }
        else
            cssString += parentStyleSheets[i].cssText;  // IE8 and earlier
    }
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.innerHTML = cssString;
    }
    catch (ex) {
        style.styleSheet.cssText = cssString;  // IE8 and earlier
    }
    document.getElementsByTagName("head")[0].appendChild(style);
}
1 голос
/ 18 апреля 2013

Вы всегда можете собрать все стили в строку и установить его как innerHTML элемента стиля в iframe. 

var selfStyleSheets = document.styleSheets;
var cssString = [];
for (var i = 0, count = selfStyleSheets.length; i < count; i++)
{
    var cssRules = selfStyleSheets[i].cssRules;
    for (var j = 0, countJ = cssRules.length; j < countJ; j++)
    {
        cssString.push(cssRules[j].cssText);
    }
}
var styleEl = iframe.contentDocument.createElement('style');
styleEl.type = 'text/css';
styleEl.innerHTML = cssString.join("\n");

iframe.contentDocument.head.appendChild(styleEl);
0 голосов
/ 06 января 2011 
var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);

А stlye.css как родительский стиль?Не уверен насчет javascript, но, возможно, так же.

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

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

...