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

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

Я пробовал

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

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

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

Ответы

Ответ 1

Вы можете "наследовать" 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, определенная на родительской странице.

Ответ 2

Вот мое "лучшее" решение для добавления стилей родителя 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);
}

Ответ 3

Вы всегда можете собрать все стили в строку и установить ее как 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);

Ответ 4

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, но, возможно, так же.