Добавить таблицу стилей в iframe с помощью jQuery - PullRequest
Новая
       23

Добавить таблицу стилей в iframe с помощью jQuery

8 голосов
/ 09 марта 2009

Я создаю редактор HTML, похожий на тот, который я печатаю прямо сейчас, с выводом ниже. Я использую iframe и выкидываю $ htmlTextBox.val () в тело iframe.

Я пытаюсь создать таблицу стилей внутри iframe, чтобы она выглядела так же хорошо, как и работает.

Заранее спасибо! 

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

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

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

Ответы [ 5 ]

12 голосов
/ 08 марта 2011

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);
12 голосов
/ 09 марта 2009

В то время как вы можете взаимодействовать с документом iframe document.styleSheets, надежный способ старой школы состоит в том, чтобы сначала иметь там таблицу стилей (написав iframe-src, чтобы указать на пустой документ с нужной таблицей стилей) или поместите его на место с помощью document.write(). Например: 

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

(При этом для документа iframe также будет установлен режим стандартов, при условии, что вы этого хотите.)

4 голосов
/ 02 сентября 2014

Мы можем вставить тег стиля в 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>
1 голос
/ 13 сентября 2014

Предполагая, что вы находитесь в одном домене и не имеете дело с междоменной безопасностью, вы захотите проверить, загружен ли iFrame - НЕ ПРОСТО РАМКУ, НО ДОКУМЕНТА ВНУТРИ !! (Это повесило меня на некоторое время при попытке использовать .load())

Затем, используя jquery, получите доступ к содержимому, получите доступ к заголовку и добавьте свою таблицу стилей к заголовку. 

 $(document.getElementById('yourIframeID').contentWindow.document).ready(function() {
      $('yourIframeID').contents().find('head').append('<link rel="stylesheet" href="/path/to/stylesheet/style.css" type="text/css" />');
 });
1 голос
/ 07 января 2010

Вытащил этот код ниже из источника jHtmlArea. Самое смешное, что эта функция была там, и я ее не осознавал. Я столкнулся с таким вопросом, когда пытался понять, как его реализовать. :)

Это не совсем "jQuery", но это работает. Я предполагаю, что что-то с append не работает с iframe, поэтому они сделали это в старой школе. Ответ Бобинса тоже выглядит хорошо, и может быть более надежным? Пока, похоже, все в порядке. 

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

РЕДАКТИРОВАТЬ : Я думаю, что причина этого в том, что он совпадает с доменом (включая создание iframe в js). В противном случае обычные блоки безопасности браузера не позволят вам манипулировать iframe dom.

См. Как применить CSS к iFrame

...