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




title tags (22)

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


Answers

إليك كيفية تطبيق شفرة CSS مباشرةً بدون استخدام <link> لتحميل ورقة أنماط إضافية.

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

هذا يخفي شعار الإعلان في صفحة iframe. شكرا لاقتراحاتكم!


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

https://github.com/cssobj/cssobj

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


هناك نص برمجي رائع يستبدل العقدة بإصدار iframe لنفسها. CodePen Demo

أمثلة الاستخدام:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

يبدو أن الإجابات الأخرى هنا تستخدم روابط 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);

تحرير: هذا لا يعمل عبر المجال ما لم يتم تعيين رأس CURS المناسب.

هناك شيئان مختلفان هنا: نمط كتلة iframe ونمط الصفحة المضمنة في iframe. يمكنك تعيين نمط iframe block بالطريقة المعتادة:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

يجب تعيين نمط الصفحة المضمّن في iframe إما عن طريق تضمينه في الصفحة الفرعية:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

أو يمكن تحميله من الصفحة الرئيسية باستخدام Javascript:

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

إذا كنت تمتلك حق الوصول إلى صفحة 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>');

});

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

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

حسنًا ، لقد اتبعت هذه الخطوات:

  1. Div مع فئة iframe
  2. أضف iframe إلى div .
  3. في ملف CSS ،
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

هذا يعمل في IE 6. يجب أن تعمل في المتصفحات الأخرى ، لا تحقق!


يمكن استخدام محاولة هذا:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });

التقيت بهذه المشكلة مع تقويم 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>

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


إذا لم يكن محتوى 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);

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


قد تكون أفضل طريقة هي التالي (إذا كنت تتحكم في الموقع المستهدف):

1) تعيين رابط iframe بمعلمة style ، مثل:

http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D

(العبارة الأخيرة هي a{color:red} مشفرة بواسطة دالة urlencode .

2) قم بتعيين target.php صفحة المتلقي مثل هذا:

<head>
..........
<style><? echo urldecode($_GET['style']);?> </style>
..........

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

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

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

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

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


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

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

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


عندما تقول "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();

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

إذا كنت ترغب في إعادة استخدام CSS و JavaScript من الصفحة الرئيسية ، فيجب أن تفكر في استبدال <IFRAME> بمحتوى محمّل من Ajax. هذا أكثر ملاءمة لـ SEO الآن عندما تكون برامج البحث قادرة على تنفيذ JavaScript.

هذا مثال jQuery يتضمن صفحة html أخرى في وثيقتك. هذا هو أكثر من كبار المسئولين الاقتصاديين ودية من iframe . للتأكد من أن برامج التتبع لا تقوم بفهرسة الصفحة المضمنة ، فقط أضفها إلى disallow في robots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

يمكنك أيضًا تضمين jQuery مباشرة من Google: http://code.google.com/apis/ajaxlibs/documentation/ - ويعني هذا تضمين تلقائي اختياري للإصدارات الأحدث وبعض الزيادة الكبيرة في السرعة. أيضا ، يعني أن عليك أن تثق بهم لتسليمك فقط jQuery؛)


لن تتمكن من تصميم محتويات iframe بهذه الطريقة. سيكون اقتراحي هو استخدام البرمجة النصية لمسير الخادم (PHP ، أو ASP ، أو برنامج Perl) أو البحث عن خدمة عبر الإنترنت تقوم بتحويل خلاصة إلى شفرة JavaScript. والطريقة الأخرى الوحيدة للقيام بذلك هي إذا كان بإمكانك القيام بما يلي.


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

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 على الأقل


هل اقترح شخص ما شيئًا كهذا؟ مجرد فكرة للقائمة الأفقية ...

جزء من HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

جزء من المغلق

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

تحديث العرض والباقي من التعليمات البرمجية

مثال آخر على كيفية استخدامه مع المدخلات النصية - حدد حقل مجموعة الأصل





html css iframe