قم بإلحاق ورقة أنماط بإطار iframe باستخدام jQuery

https://stackoverflow.com/questions/624979

05-07-2019
|

سؤال

أقوم بإنشاء محرر 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());
}

المحلول

وبينما كنت <م> يمكن التفاعل مع document.styleSheets إطار iframe، وهي طريقة يمكن الاعتماد عليها للمدرسة القديمة وإما أن يكون هناك أنماط في المقام الأول (عن طريق الكتابة إطار 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 لوضع المعايير، على افتراض أن هذا ما تريد).

نصائح أخرى

متابعة:

لغة البرمجة

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

مسج

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

ويمكننا إدراج العلامة النمط إلى 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>

وسحبت هذا الرمز أدناه من مصدر jHtmlArea. الشيء المضحك هو، وكانت هذه الميزة هناك وأنا لم أكن أدرك ذلك. جئت عبر هذا السؤال SO عندما كنت في محاولة لمعرفة كيفية تنفيذ ذلك. :)

وهذا ليس حقا "مسج" لكنه يعمل. أنا guesing شيء مع إلحاقي لا يعمل مع الإطار من ذلك انهم فعلوا ذلك المدرسة القديمة. الجواب Bobince لتبدو جيدة جدا، ويمكن أن تكون أكثر موثوقية؟ وحتى الآن، وهذا ما يبدو للعمل طيب.

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

تعديل : لوأعتقد أن السبب يعمل هذا هو ما اذا كان هو sameDomain (بما في ذلك إنشاء IFRAME في شبيبة) وإلا لبنات الأمنية للمتصفح المعتادة سوف تمنعك من التلاعب الإطار من دوم

كيفية تطبيق CSS لIFRAME

وعلى افتراض كنت على نفس المجال وعدم التعامل مع الأمن عبر النطاقات، فأنت تريد أن تحقق إذا تم تحميل الإطار من - وليس فقط IFRAME، BUT THE INSIDE وثيقة !! (هذا علقوني لفترة من الوقت في حين تحاول استخدام .load())

وبعد ذلك، وذلك باستخدام مسج، الوصول إلى محتويات، والوصول إلى الرأس، وإلحاق ورقة طريقتك في الرأس.

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow