html - كلمات - كيفية تطبيق CSS على iframe؟




كلمات html (18)

أعتقد أن أسهل طريقة هي إضافة div ، في نفس المكان مثل iframe ، بعد ذلك

جعل z-index أكبر من حاوية iframe ، بحيث يمكنك ببساطة تصميم نمط div الخاص بك. إذا كنت بحاجة إلى النقر عليه ، فاستخدم فقط pointer-events:none في قسمك الخاص ، لذلك يعمل iframe في حالة ما إذا كنت بحاجة إلى النقر عليه ؛)

آمل أن يساعد شخص ما ؛)

لدي صفحة بسيطة تحتوي على بعض أقسام iframe (لعرض وصلات RSS). كيف يمكنني تطبيق نفس تنسيق CSS من الصفحة الرئيسية إلى الصفحة المعروضة في iframe؟


إذا كنت تتحكم في الصفحة في iframe ، كما قال hangy ، فإن الطريقة الأسهل هي إنشاء ملف CSS مشترك باستخدام الأنماط الشائعة ، ثم ربطه من صفحات html الخاصة بك.

وإلا فمن المستبعد أن تتمكن من تغيير نمط الصفحة ديناميكيًا من صفحة خارجية في iframe. ويرجع ذلك إلى قيام المستعرضين بتشديد الأمان على البرمجة النصية لـ dom frame بسبب سوء الاستخدام المحتمل للانتحال وغيره من الاختراق.

قد يزودك هذا البرنامج التعليمي بمزيد من المعلومات حول إطارات iframes النصية بشكل عام. حول البرمجة النصية عبر الإطار يشرح قيود الأمان من منظور IE.


إذا كنت تمتلك حق الوصول إلى صفحة iframe وتريد إنشاء CSS مختلفًا عليها فقط عند تحميلها عبر iframe على صفحتك ، فقد وجدت هنا حلاً لهذا النوع من الأشياء

هذا يعمل حتى لو كان iframe يقوم بتنزيل نطاق مختلف

تحقق من postMessage()

الخطة هي ، إرسال css إلى iframe كرسالة مثل

iframenode.postMessage('h2{color:red;}','*');

* هو إرسال هذه الرسالة بصرف النظر عن النطاق في iframe

واستلام الرسالة في iframe وإضافة الرسالة المستلمة (CSS) إلى رأس المستند.

كود لإضافته في صفحة iframe

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

إذا لم يكن محتوى iframe بالكامل تحت سيطرتك أو كنت ترغب في الوصول إلى المحتوى من صفحات مختلفة ذات أنماط مختلفة ، يمكنك محاولة التلاعب بها باستخدام JavaScript.

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

لاحظ أنه اعتمادًا على المتصفح الذي تستخدمه ، قد يعمل فقط على الصفحات التي يتم عرضها من نفس النطاق.


التقيت بهذه المشكلة مع تقويم Google . كنت أرغب في تصميمه على خلفية داكنة وتغيير الخط.

لحسن الحظ ، كان عنوان URL من شفرة التضمين ليس له أي قيود على الوصول المباشر ، لذلك باستخدام PHP وظيفة file_get_contents فمن الممكن الحصول على المحتوى بأكمله من الصفحة. بدلاً من الاتصال بعنوان URL الخاص بـ Google ، يمكن استدعاء ملف php موجود على خادمك ، على سبيل المثال. google.php ، والتي ستحتوي على المحتوى الأصلي مع التعديلات:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

إضافة المسار إلى ورقة الأنماط:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(سيؤدي ذلك إلى وضع ورقة الأنماط الخاصة بك قبل علامة نهاية head مباشرةً).

حدد عنوان url الأساسي من عنوان url الأصلي في حالة استدعاء css و js نسبيًا:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

يجب أن يبدو ملف google.php النهائي كما يلي:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

بعد ذلك ، يمكنك تغيير شفرة iframe embed إلى:

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

حظا طيبا وفقك الله!


التوسع في حل jQuery أعلاه للتعامل مع أي تأخير في تحميل محتويات الإطار.

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

عملت التالية بالنسبة لي.

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

عندما تقول "doc.open ()" فهذا يعني أنه بإمكانك كتابة أي علامة HTML داخل iframe ، لذلك يجب عليك كتابة جميع العلامات الأساسية لصفحة HTML وإذا كنت تريد أن يكون لديك رابط CSS في iframe head ، اكتب iframe مع رابط CSS فيه. انا اعطيك مثالا:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

كبديل ، يمكنك استخدام تقنية CSS-in-JS ، مثل Lib:

https://github.com/cssobj/cssobj

يمكنه حقن كائن JS بتنسيق CSS للإطار iframe ، ديناميكيًا


لقد وجدت حل آخر لوضع النمط في html الرئيسي مثل هذا

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

ثم في iframe القيام بذلك (انظر js onload)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

وفي شبيبة

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

قد لا يكون هذا هو الحل الأفضل ، وبالتأكيد يمكن تحسينه ، ولكنه خيار آخر إذا كنت تريد الاحتفاظ بعلامة "style" في النافذة الرئيسية


ما ورد أعلاه مع القليل من التغيير يعمل:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

يعمل بشكل جيد مع ff3 و ie8 على الأقل


هنا ، هناك شيئين داخل المجال

  1. قسم iFrame
  2. تم تحميل الصفحة داخل iFrame

لذلك تريد أن تصمم هذين القسمين على النحو التالي ،

1. نمط لقسم iFrame

ويمكنه استخدام النمط باستخدام CSS بهذا الاسم أو اسم class المحترم. يمكنك فقط تصميمها في أوراق نمطك الأم أيضًا.

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. قم بتشكيل الصفحة التي تم تحميلها داخل iFrame

يمكن تحميل هذه الأنماط من الصفحة الرئيسية بمساعدة جافا سكريبت

var cssFile  = document.createElement("link") 
cssLink.rel  = "stylesheet"; 
cssLink.type = "text/css"; 
cssLink.href = "iFramePage.css"; 

ثم قم بتعيين ملف CSS هذا إلى قسم iFrame المحترم

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

هنا ، يمكنك تحرير الجزء الرئيسي من الصفحة داخل iFrame باستخدام هذه الطريقة أيضًا

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead .append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath , 
      type: "text/css" }
     ));

يبدو أن الإجابات الأخرى هنا تستخدم روابط jQuery و CSS.

يستخدم هذا الرمز جافا سكريبت الفانيلا. يقوم بإنشاء عنصر <style> جديد. يقوم بتعيين محتوى النص الخاص بهذا العنصر ليكون عبارة عن سلسلة تحتوي على CSS جديد. ويضيف هذا العنصر مباشرةً إلى رأس مستند iframe.

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

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


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

الإصدار المضغوط الخاص بي:

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

ومع ذلك ، يكون iframe غير جاهز في بعض الأحيان عند تحميل النافذة ، لذلك هناك حاجة إلى استخدام جهاز ضبط وقت.

رمز جاهز للاستخدام (مع جهاز ضبط الوقت):

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

... و jQuery link:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);


var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));






iframe