Dołącz arkusz stylów do elementu iframe za pomocą jQuery

Tworzę edytor HTML, podobny do tego, który wpisuję teraz, z wyjściem poniżej. Używam elementu iframe i umieszczam plik $ htmlTextBox.val() w ciele elementu iframe.Dołącz arkusz stylów do elementu iframe za pomocą jQuery

Próbuję utworzyć arkusz stylów wewnątrz elementu iframe, aby wyglądał tak dobrze, jak działa.

Z góry dziękuję!

$htmlTextBox.keyup(function(){ 
    SetPreview(); 
}); 

function SetPreview() 
{ 
    var doc = $preview[0].contentWindow.document; 
    var $body = $("body", doc); 

    $body.html($htmlTextBox.val()); 
}

Źródło

2009-03-09 hunter

Chociaż można interakcję z document.styleSheets iframe, tym old-school niezawodnym sposobem jest albo mieć stylów tam w pierwszej kolejności (pisząc iframe src pkt do pustego dokumentu z żądanym arkuszem stylów) lub umieść go w miejscu z document.write(). Na przykład:

<body> 
    <iframe></iframe> 
    <script type="text/javascript"> 

     var d= frames[0].document; 
     d.open(); 
     d.write(
      '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">'+ 
      '<html><head><style type="text/css">'+ 
      'body { font-size: 200%; }'+ 
      '<\/style><\/head><body><\/body><\/html>' 
     ); 
     d.close(); 

     d.body.innerHTML= '<em>Hello</em>'; 
    </script> 
</body>

(Będzie to również ustawić dokument iframe z normami trybie, przy założeniu, że to, co chcesz.)

Źródło

2009-03-09 04:42:52 bobince

Poszedłem na trasę z podstawową stroną z arkuszem stylów zawartym w . $ (dokument) .ready (function() {SetPreview();}); nie ustawia treści elementu iframe w Chrome, Safari lub FireFox, ale działa w IE ... – hunter

tylko niektóre tło, ustawiam Podgląd na stronie, a następnie na każdym kluczu w dokumencie jQuery TextArea – hunter

.Już wymaga tylko załadowania głównego dokumentu, nie musi czekać na załadowanie treści elementu iframe. Zatem może to być warunek wyścigowy, aby sprawdzić, czy dokument iframe jest ładowany przed "gotowym", a więc czy dokument.body jest jeszcze dostępny. – bobince

szarpana ten kod poniżej od źródła jHtmlArea. Zabawne jest to, że funkcja była dostępna i nie zdawałem sobie z tego sprawy. Natknąłem się na to pytanie SO, gdy próbowałem dowiedzieć się, jak go wdrożyć. :)

To naprawdę nie jest "jQuery", ale działa. Zgaduję, że coś z appendem nie działa z iframe, więc zrobili to w starej szkole. Odpowiedź Bobince również wygląda dobrze i może być bardziej wiarygodna? Jak dotąd wygląda na to, że działa dobrze.

var e = edit.createElement('link'); 
e.rel = 'stylesheet'; 
e.type = 'text/css'; 
e.href = options.css; 
this.iframe[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(e);

EDIT: Myślę, że powodem jest to działa, jeśli jest sameDomain (w tym tworzeniu iframe w JS) W przeciwnym razie zwykłe bloki zabezpieczeń przeglądarki uniemożliwi manipulowanie DOM iframe.

Zobacz How to apply CSS to iFrame

Źródło

2010-01-07 16:33:34 Jason

gdzie byłeś w zeszłym roku? – hunter

Followup:

HTML

<iframe id="message" name="message" />

jQuery

setTimeout(function() { 
    var $head = $("#message").contents().find("head");     
    $head.append($("<link/>", 
     { rel: "stylesheet", href: url, type: "text/css" } 
    ));     
}, 1);

Źródło

2011-03-08 16:29:30 hunter

Ponieważ treść jest ładowana przed zastosowaniem css, wyświetlane jest migotanie niezaestylowanej strony. Masz pomysł, jak zapobiec wyświetlaniu strony, dopóki styl nie zostanie zastosowany? –

Możemy wstawić znacznik styl w iframe.

<style type="text/css" id="cssID"> 
.className 
{ 
    background-color: red; 
} 
</style> 

<iframe id="iFrameID"></iframe> 

<script type="text/javascript"> 
    $(function() { 
     $("#iFrameID").contents().find("head")[0].appendChild(cssID); 
     //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]); 
    }); 
</script>

Źródło

2014-09-02 15:15:07

Geniusz. Dzięki Palani. –

Zakładając, że jesteś w tej samej domenie, a nie do czynienia z krzyżem bezpieczeństwa domeny, będziemy chcieli, aby sprawdzić, czy jest załadowany iFrame - nie tylko IFRAME, ale dokument INSIDE !! (To zawiesiło mnie na chwilę podczas próby użycia .load()) Następnie, używając jquery, uzyskaj dostęp do zawartości, uzyskaj dostęp do nagłówka i dołącz swój arkusz stylów do głowy.

$(document.getElementById('yourIframeID').contentWindow.document).ready(function() { 
     $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />'); 
});

Źródło

2014-09-13 01:05:16

Dołącz arkusz stylów do elementu iframe za pomocą jQuery

Odpowiedz

Powiązane problemy