Iframe üst öğeden devralınır.

, üst öğesinin stillerini ve javascript öğelerini nasıl alırım?Iframe üst öğeden devralınır.

Ben <script> etiketlerini çıkarır,

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

çalıştı Ama var. Ayrıca iframe'imi etkileyen stilleri göremiyorum.

Kaçırdığım bu daha iyi/başka bir yaklaşım var mı? Teşekkürler.

kaynak

2011-01-06 Robin Maben

, sadece uygun iframe html –

Sen iframe'de böyle kod sağlayarak ebeveyn CSS "miras" olabilir:

<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 ve Firefox'ta benim için iyi çalıştı.

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

: Doğrudan, ancak örneğin, ebeveyn içinden JS kullanmak yerde parent. ekleyebilir ben iframe içine ebeveyn JavaScript eklemek için bir yol bulamadı JavaScript, İlişkin

Bu, düğme tıklandığında üst sayfada tanımlanan MyFunc işlevini çağırır.

kaynak

2011-01-06 08:54:16

işleyebilen Sana ebeveyn kafasında için görünmelidir eleman 'style' ama' link' olmadığını düşünüyorum. – Bazzz

@Bazzz evet de bu eklemeniz gerekebilir .. –

+19

Bu çapında etki yapamaz unutmayın - çocuk ebeveynin DOM sorguya edebilmek için iframe yerel olmalıdır. – RET

-1

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);

Ve ebeveynin stili olarak stlye.css? Javascript, ama aynı şekilde emin değilim.

kaynak

2011-01-06 06:33:00

Tüm stilleri dize olarak toplayabilir ve iframe'de stil öğesinin innerHTML olarak ayarlayabilirsiniz.

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);

kaynak

2013-04-18 15:50:23 Alexey

IE6-8 ile çalışmaz (eğer önemliyse).Aynı zamanda soruyu da yanıtlamıyor çünkü tam tersini yapıyor (iframe'in stillerini ana babaya ekler). – Tobias81

İşte benim çözüm "en iyiler" iframe'in ebeveynin stilleri eklemek için (değil komut) 'dir. IE6-11, Firefox, Chrome, (eski) Opera ve muhtemelen her yerde çalışır. javascript kod ekleyebilirsiniz eğer

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); 
}

kaynak

2015-01-29 14:48:32 Tobias81

Bu çok iyi bir cevap. Ancak ebeveynin sahip olması durumunda importedCssRules eksik. – joydesigner

Bu, IE'de bazı durumlarda, yani ana kare kurallarına cssText erişirken sorun yaşayacak. "Üye bulunamadı" https://connect.microsoft.com/IE/feedback/details/955703/accessing-csstext-of-a-keyframe-rule-that-contains-a-webkit-property-via- cssom-üretir-exception –

Degularjs ile çalışır .... –

Iframe üst öğeden devralınır.

cevap

İlgili konular