การใช้ CSS เพื่อส่งผลกระทบต่อสไตล์ div ภายใน iframe

เป็นไปได้หรือไม่ที่จะเปลี่ยนสไตล์ของ div ที่อยู่ภายใน iframe บนหน้าโดยใช้ CSS เท่านั้น?

คุณต้องมีจาวาสคริปต์ มันเป็นเช่นเดียวกับการทำมันในหน้าหลักยกเว้นคุณจะต้องนำหน้าคำสั่ง JavaScript ของคุณด้วยชื่อของ iframe

โปรดจำไว้ว่านโยบายต้นกำเนิดเดียวกันนั้นมีผลบังคับใช้ดังนั้นคุณสามารถทำเช่นนี้กับองค์ประกอบ iframe ซึ่งมาจากเซิร์ฟเวอร์ของคุณเองเท่านั้น

ฉันใช้กรอบงานต้นแบบเพื่อทำให้ง่ายขึ้น:

frame1.$('mydiv').style.border = '1px solid #000000'

หรือ

frame1.$('mydiv').addClassName('withborder')

ในระยะสั้น ๆ

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

ใช่. ดูรายละเอียดเพิ่มเติมในหัวข้อนี้: วิธีการใช้ CSS กับ iframe?

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

คุณสามารถดึงเนื้อหาของรายการiframeแรกจากนั้นใช้jQueryตัวเลือกกับเนื้อหาตามปกติ

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

โชคดี!

คำตอบอย่างรวดเร็วคือ: ไม่ขอโทษ

ไม่สามารถใช้เพียง CSS โดยทั่วไปคุณต้องมีการควบคุมเนื้อหา iframe เพื่อจัดรูปแบบ มีวิธีการใช้จาวาสคริปต์หรือภาษาเว็บที่คุณเลือก (ซึ่งฉันได้อ่านนิดหน่อย แต่ฉันไม่คุ้นเคยกับตัวเอง) เพื่อแทรกสไตล์ที่ต้องการแบบไดนามิก แต่คุณจะต้องควบคุมเนื้อหา iframe โดยตรงซึ่งฟังดู เหมือนที่คุณไม่มี

ใช้ Jquery และรอจนกว่าแหล่งจะโหลดนี่คือวิธีที่ฉันได้รับ (ใช้ช่วงเชิงมุมคุณสามารถใช้วิธี setInterval javascript)

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

อาจไม่ใช่วิธีที่คุณคิด iframe จะต้อง<link>อยู่ในไฟล์ css ด้วย และคุณไม่สามารถทำได้แม้กับ javascript หากอยู่ในโดเมนอื่น

เห็นได้ชัดว่าสามารถทำได้ผ่าน jQuery:

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

https://stackoverflow.com/a/13959836/1625795

วิธีการทำแฮ็ก - ไอชการทำสิ่งต่าง ๆ นั้นเหมือนกับที่ยูจีนกล่าว ฉันสิ้นสุดการติดตามรหัสของเขาและเชื่อมโยงไปยัง Css ที่กำหนดเองสำหรับหน้า ปัญหาสำหรับฉันคือว่าด้วยไทม์ไลน์ของทวิตเตอร์คุณต้องหลีกเลี่ยงการใช้ทวิตเตอร์เพื่อลบล้างโค้ด smidgen ของพวกเขา ตอนนี้เรามีลำดับเวลาการกลิ้งด้วย css ของเรา, แบบอักษรที่มีขนาดใหญ่ขึ้น IE, ความสูงของบรรทัดที่เหมาะสมและทำให้แถบเลื่อนถูกซ่อนไว้สำหรับความสูงมากกว่าขีด จำกัด ของพวกเขา

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

เพียงเพิ่มสิ่งนี้และทำงานได้ดี:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

ใช่เป็นไปได้แม้จะยุ่งยาก คุณจะต้องพิมพ์ / echo HTML ของหน้าลงในเนื้อความของหน้าของคุณจากนั้นใช้ฟังก์ชันการเปลี่ยนแปลงกฎ CSS การใช้ตัวอย่างเดียวกันที่ระบุข้างต้นคุณจะต้องใช้วิธีการวิเคราะห์คำในการค้นหา divs ในหน้าจากนั้นใช้ CSS กับมันจากนั้นพิมพ์ซ้ำ / สะท้อนออกไปยังผู้ใช้ปลายทาง ฉันไม่ต้องการสิ่งนี้ดังนั้นฉันไม่ต้องการโค้ดที่ทำงานในทุกรายการใน CSS ของเว็บเพจอื่นเพียงแค่ไปอย่างง่ายดาย

อ้างอิง:

• การพิมพ์เนื้อหาของ IFRAME
• การเข้าถึงและการพิมพ์ซอร์สโค้ด HTML โดยใช้ PHP หรือ JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

การรวมโซลูชันต่าง ๆ เข้าไว้ด้วยกัน

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

เป็นไปไม่ได้จากฝั่งไคลเอ็นต์ ข้อผิดพลาดของจาวาสคริปต์จะได้รับการยก "ข้อผิดพลาด: การอนุญาตให้ปฏิเสธการเข้าถึงคุณสมบัติ" เอกสาร "" เนื่องจาก Iframe ไม่ได้เป็นส่วนหนึ่งของโดเมนของคุณ ทางออกเดียวคือดึงหน้าจากรหัสฝั่งเซิร์ฟเวอร์และเปลี่ยน CSS ที่จำเป็น