Как сделать наследовать стили своего родителя и javascript.Iframe наследует от родителя
Я попытался
var parentHead = $("head", parent.document).html();
$("head").html(parentHead);
Но, раздевает вне <script> меток. Кроме того, я не вижу стилей, влияющих на мой iframe.
Есть ли лучший/любой другой подход к этому, который мне не хватает? Спасибо.
Вы можете «наследовать» КСС родителя, имея такой код в 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, определяемая на родительской странице.
Я думаю, что элемент, который вы должны искать в голове родителя, не '' style' но link'. – Bazzz
@Bazzz может понадобиться добавить их также. –
Помните, что вы не можете сделать это через домены - iframe должен быть локальным для ребенка, чтобы иметь возможность опросить DOM родителя. – RET
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, но, возможно, так же.
Вы всегда можете собрать все стили в строку и установить ее как 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);
Не работает с IE6-8 (если это имеет значение).Он также фактически не отвечает на вопрос, потому что он делает обратное (добавляет стили iframe к родительскому элементу). – Tobias81
Это мое «лучшее» решение для добавления стилей родителя 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);
}
Этот очень хороший ответ. Но отсутствие импортированныхCssRules, если родитель имел. – joydesigner
Это будет проблемой в IE при доступе к cssText в некоторых случаях, то есть к правилам ключевого кадра. Вы получите «Member not found» https://connect.microsoft.com/IE/feedback/details/955703/accessing-csstext-of-a-keyframe-rule-that-contains-a-webkit-property-via- cssom-generates-exception –
Работает с угловыми ... –
если вы можете добавить код на JavaScript, которые вы можете просто вынести соответствующий IFrame HTML –