วิธีการใช้ CSS กับ iframe?

ฉันมีหน้าง่าย ๆ ที่มีบางส่วน iframe (เพื่อแสดงลิงก์ RSS) ฉันจะใช้รูปแบบ CSS เดียวกันจากหน้าหลักไปยังหน้าที่แสดงใน iframe ได้อย่างไร

แก้ไข:วิธีนี้ใช้ไม่ได้ข้ามโดเมนเว้นแต่ว่าได้ตั้งค่าส่วนหัว CORSที่เหมาะสม

มีสองสิ่งที่แตกต่างกันที่นี่: สไตล์ของบล็อก iframe และสไตล์ของเพจที่ฝังอยู่ใน iframe คุณสามารถกำหนดสไตล์ของบล็อก iframe ได้ตามปกติ:

<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.head.appendChild(cssLink);

ผมได้พบกับปัญหานี้กับGoogle Calendar ฉันต้องการจัดวางสไตล์บนพื้นหลังสีเข้มและเปลี่ยนแบบอักษร

โชคดีที่ URL จากโค้ดฝังไม่มีข้อ จำกัด ในการเข้าถึงโดยตรงดังนั้นโดยใช้ฟังก์ชั่น PHP file_get_contentsทำให้สามารถรับเนื้อหาทั้งหมดจากหน้าเว็บได้ แทนที่จะเรียกใช้ Google URL คุณสามารถเรียกไฟล์ 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รหัสฝังเป็น:

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

โปรดทราบว่าขึ้นอยู่กับเบราว์เซอร์ที่คุณใช้สิ่งนี้อาจใช้ได้กับหน้าที่แสดงจากโดเมนเดียวกันเท่านั้น

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

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

iframe ได้รับการจัดการในระดับสากลเหมือนกับหน้า HTML ที่แตกต่างกันโดยเบราว์เซอร์ส่วนใหญ่ หากคุณต้องการใช้สไตล์ชีทเดียวกันกับเนื้อหาของ iframe เพียงอ้างอิงจากหน้าเว็บที่ใช้ในนั้น

นี่คือวิธีการใช้โค้ด CSS โดยตรงโดยไม่ต้องใช้<link>เพื่อโหลดสไตล์ชีทพิเศษ

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

สิ่งนี้ซ่อนแบนเนอร์ในหน้า iframe ขอขอบคุณสำหรับคำแนะนำของคุณ!

หากคุณควบคุมหน้าใน iframe ดังที่ hangy กล่าววิธีที่ง่ายที่สุดคือการสร้างไฟล์ CSS ที่ใช้ร่วมกันที่มีสไตล์ทั่วไปจากนั้นเพียงเชื่อมโยงไปยังหน้านั้นจากหน้า html ของคุณ

ไม่เช่นนั้นคุณจะไม่สามารถเปลี่ยนสไตล์ของหน้าจากหน้าภายนอกใน iframe ของคุณแบบไดนามิก เนื่องจากเบราว์เซอร์ทำให้การรักษาความปลอดภัยในการเขียนสคริปต์ cross frame dom แน่นเกินไปเนื่องจากอาจมีการปลอมแปลงและแฮ็กอื่น ๆ ในทางที่ผิด

บทช่วยสอนนี้อาจให้ข้อมูลเพิ่มเติมเกี่ยวกับการเขียนสคริปต์ iframe โดยทั่วไป เกี่ยวกับการเขียนสคริปต์ข้ามเฟรมอธิบายข้อ จำกัด ด้านความปลอดภัยจากมุมมองของ IE

การเปลี่ยนแปลงเล็กน้อยด้านบน:

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 อย่างน้อย

หากคุณต้องการนำ CSS และ JavaScript กลับมาใช้ใหม่จากหน้าหลักบางทีคุณควรพิจารณาแทนที่<IFRAME>ด้วยเนื้อหาที่โหลด Ajax นี่คือ SEO ที่เป็นมิตรมากขึ้นในขณะนี้เมื่อบอทค้นหาสามารถเรียกใช้ JavaScript ได้

นี่คือตัวอย่างjQueryที่รวมหน้า html อื่นไว้ในเอกสารของคุณ นี้เป็นมากขึ้น SEO iframeเป็นมิตรกว่า เพื่อให้แน่ใจว่าบ็อตไม่ได้จัดทำดัชนีหน้าเว็บที่รวมไว้ให้เพิ่มเข้าไปเพื่อไม่อนุญาต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;)

ต่อไปนี้ใช้งานได้สำหรับฉัน

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

ขยายโซลูชัน 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();
});

รุ่นกะทัดรัดของฉัน:

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

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

คำตอบอื่น ๆ ที่นี่ดูเหมือนจะใช้ลิงก์ jQuery และ CSS

รหัสนี้ใช้ JavaScript วานิลลา มันสร้าง<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);

เมื่อคุณพูดว่า "doc.open ()" หมายความว่าคุณสามารถเขียนแท็ก HTML ใดก็ได้ใน iframe ดังนั้นคุณควรเขียนแท็กพื้นฐานทั้งหมดสำหรับหน้า HTML และถ้าคุณต้องการมีลิงค์ CSS ในหัว iframe ของคุณเพียงแค่เขียน 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="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

ใช้สามารถลองนี้:

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

คุณจะไม่สามารถจัดสไตล์เนื้อหาของ iframe ด้วยวิธีนี้ ข้อเสนอแนะของฉันคือใช้สคริปต์ฝั่งเซิร์ฟเวอร์ (PHP, ASP หรือสคริปต์ Perl) หรือค้นหาบริการออนไลน์ที่จะแปลงฟีดเป็นโค้ด JavaScript วิธีเดียวที่จะทำคือถ้าคุณสามารถทำเซิร์ฟเวอร์รวมถึง

ในกรณีที่คุณสามารถเข้าถึงหน้า 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>');

});

เนื่องจากมีคำตอบมากมายที่เขียนสำหรับโดเมนเดียวกันฉันจะเขียนวิธีการนี้ในโดเมนข้าม

ก่อนอื่นคุณต้องรู้ว่าPost Message APIAPI เราต้องการผู้ส่งสารเพื่อสื่อสารระหว่างสองหน้าต่าง

นี่คือผู้ส่งสารที่ฉันสร้างขึ้น

/**
 * Creates a messenger between two windows
 *  which have two different domains
 */
class CrossMessenger {

    /**
     * 
     * @param {object} otherWindow - window object of the other
     * @param {string} targetDomain - domain of the other window
     * @param {object} eventHandlers - all the event names and handlers
     */
    constructor(otherWindow, targetDomain, eventHandlers = {}) {
        this.otherWindow = otherWindow;
        this.targetDomain = targetDomain;
        this.eventHandlers = eventHandlers;

        window.addEventListener("message", (e) => this.receive.call(this, e));
    }

    post(event, data) {

        try {
            // data obj should have event name
            var json = JSON.stringify({
                event,
                data
            });
            this.otherWindow.postMessage(json, this.targetDomain);

        } catch (e) {}
    }

    receive(e) {
        var json;
        try {
            json = JSON.parse(e.data ? e.data : "{}");
        } catch (e) {
            return;
        }
        var eventName = json.event,
            data = json.data;

        if (e.origin !== this.targetDomain)
            return;

        if (typeof this.eventHandlers[eventName] === "function") 
            this.eventHandlers[eventName](data);
    }

}

การใช้สิ่งนี้ในสองหน้าต่างเพื่อสื่อสารสามารถแก้ไขปัญหาของคุณได้

ในหน้าต่างหลัก

var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");

var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
   css: cssContent
})

จากนั้นรับเหตุการณ์จาก Iframe

ใน Iframe:

var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
    cssContent: (data) => {
        var cssElem = document.createElement("style");
        cssElem.innerHTML = data.css;
        document.head.appendChild(cssElem);
    }
})

ดูบทช่วยสอนJavascript และ Iframes ที่สมบูรณ์ สำหรับรายละเอียดเพิ่มเติม

ฉันพบวิธีแก้ไขปัญหาอื่นที่จะนำสไตล์ใน 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>

และใน js

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

อาจไม่ใช่วิธีที่ดีที่สุดและสามารถปรับปรุงได้อย่างแน่นอน แต่เป็นอีกตัวเลือกหนึ่งหากคุณต้องการเก็บแท็ก "สไตล์" ไว้ในหน้าต่างหลัก

ที่นี่มีสองสิ่งภายในโดเมน

1. มาตรา iFrame
2. เพจโหลดภายใน iFrame

ดังนั้นคุณต้องการจัดรูปแบบสองส่วนดังต่อไปนี้

1. สไตล์สำหรับส่วน iFrame

มันสามารถสไตล์การใช้ CSS กับที่เคารพidหรือ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. จัดรูปแบบ Page Loaded ภายใน iFrame

สไตล์นี้สามารถโหลดได้จากหน้าหลักด้วยความช่วยเหลือของ Javascript

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.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 โพสต์ที่นี่ ...

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

ฉันคิดว่าวิธีที่ง่ายที่สุดคือเพิ่ม div อื่นในที่เดียวกับ iframe

ทำให้มันz-indexใหญ่กว่า iframe container ดังนั้นคุณสามารถสไตล์ของ div ของคุณได้อย่างง่ายดาย หากคุณต้องการคลิกที่มันเพียงใช้pointer-events:noneกับ div ของคุณเองดังนั้น iframe จะทำงานในกรณีที่คุณต้องการคลิกที่มัน;)

ฉันหวังว่ามันจะช่วยให้ใครบางคน;)

มีสคริปต์ที่ยอดเยี่ยมที่แทนที่โหนดด้วยเวอร์ชัน iframe ของตัวเอง การสาธิต CodePen

ตัวอย่างการใช้งาน:

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

คุณสามารถใช้เทคโนโลยี CSS-in-JS ได้เช่นด้านล่าง lib:

https://github.com/cssobj/cssobj

มันสามารถฉีดวัตถุ JS เป็น CSS เพื่อ iframe แบบไดนามิก

นี่เป็นเพียงแนวคิด แต่อย่าใช้สิ่งนี้โดยไม่ตรวจสอบความปลอดภัยและกรอง! มิฉะนั้นสคริปต์อาจแฮ็คไซต์ของคุณ!

คำตอบ: หากคุณควบคุมไซต์เป้าหมายคุณสามารถตั้งค่าสคริปต์ตัวรับเช่น:

1) ตั้งค่าลิงก์ iframe พร้อมstyleพารามิเตอร์เช่น:

http://your_site.com/target.php?color=red

(วลีสุดท้ายถูกa{color:red} เข้ารหัสโดยurlencodeฟังก์ชัน

2) ตั้งค่าหน้าผู้รับtarget.phpเช่นนี้:

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

ฉันได้ทำตามขั้นตอนเหล่านี้แล้ว:

1. Div กับชั้นเรียนที่จะถือ iframe
2. เพิ่มไปยังiframediv
3. ในไฟล์ CSS

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

ใช้งานได้ใน IE 6 ควรทำงานในเบราว์เซอร์อื่นตรวจสอบ!