แทนที่ลักษณะเนื้อความสำหรับเนื้อหาใน iframe

ฉันจะควบคุมภาพพื้นหลังและสีขององค์ประกอบร่างกายภายในได้iframeอย่างไร หมายเหตุองค์ประกอบของร่างกายที่ฝังตัวมีคลาสและiframeเป็นของหน้าเว็บที่เป็นส่วนหนึ่งของเว็บไซต์ของฉัน

เหตุผลที่ฉันต้องการนี่คือเว็บไซต์ของฉันมีพื้นหลังสีดำกำหนดให้กับร่างกายและจากนั้นพื้นหลังสีขาวกำหนดให้กับ div ที่มีข้อความ เครื่องมือแก้ไข WYSIWYG ใช้iframeเนื้อหาเพื่อฝังเมื่อแก้ไข แต่ไม่รวม div ดังนั้นข้อความจึงอ่านยากมาก

เนื้อหาของตัวiframeแก้ไขเมื่อมีคลาสที่ไม่ได้ใช้ที่อื่นดังนั้นฉันสมมติว่านี่ถูกใส่ไว้ที่นั่นเพื่อแก้ไขปัญหาเช่นนี้ อย่างไรก็ตามเมื่อฉันใช้สไตล์กับclass.bodyพวกเขาจะไม่แทนที่สไตล์ที่ใช้กับเนื้อความ สิ่งที่แปลกก็คือสไตล์นั้นปรากฏใน Firebug ดังนั้นฉันไม่รู้เลยว่าเกิดอะไรขึ้น!

ขอบคุณ

อัปเดต - ฉันได้ลองวิธีการแก้ปัญหาของ @ mikeq ในการเพิ่มสไตล์ให้กับคลาสที่เป็นคลาสของร่างกาย สิ่งนี้ไม่ทำงานเมื่อถูกเพิ่มลงในสไตล์ชีทของหน้าหลัก แต่มันจะทำงานเมื่อเพิ่มด้วย Firebug ฉันสมมติว่านี่เป็นเพราะ Firebug ถูกนำไปใช้กับองค์ประกอบทั้งหมดในหน้าในขณะที่ CSS ไม่ได้ใช้ภายใน iframes นี่หมายความว่าการเพิ่ม css หลังจากโหลดหน้าต่างด้วย JavaScript จะทำงานได้หรือไม่

iframe คือ 'hole' ในหน้าเว็บของคุณที่แสดงหน้าเว็บอื่นภายใน เนื้อหาของ iframe ไม่ได้อยู่ในรูปร่างหรือส่วนหนึ่งส่วนใดของหน้าหลักของคุณ

ตามที่คนอื่นได้กล่าวไว้ตัวเลือกของคุณคือ:

• ให้ไฟล์ที่กำลังโหลดใน iframe CSS ที่จำเป็น
• หากไฟล์ใน iframe มาจากโดเมนเดียวกับพาเรนต์ของคุณคุณสามารถเข้าถึง DOM ของเอกสารใน iframe จากพาเรนต์ได้

ด้านล่างใช้งานได้หากเนื้อหา iframe มาจากโดเมนหลักเดียวกัน

สคริปต์ jquery ต่อไปนี้ใช้ได้สำหรับฉัน ทดสอบบน Chrome และ IE8 iframe ด้านในอ้างอิงถึงเพจที่อยู่ในโดเมนเดียวกับเพจระดับบน

ในกรณีนี้ฉันซ่อนองค์ประกอบที่มีคลาสเฉพาะใน iframe ด้านใน

โดยทั่วไปคุณเพียงแค่เพิ่มองค์ประกอบ 'สไตล์' ต่อท้าย 'หัว' ของ iframe ด้านใน

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

คุณไม่สามารถเปลี่ยนรูปแบบของหน้าเว็บที่แสดงใน iframe ได้เว้นแต่คุณจะมีการเข้าถึงโดยตรงดังนั้นจึงเป็นเจ้าของไฟล์ html และ / หรือ css ต้นทาง

นี่คือหยุดXSS (การเขียนสคริปต์ข้ามไซต์)

An iframeมีขอบเขตอื่นดังนั้นคุณจึงไม่สามารถเข้าถึงสไตล์หรือเปลี่ยนเนื้อหาด้วย javascript ได้

เป็นพื้น "หน้าอื่น"

สิ่งเดียวที่คุณทำได้คือแก้ไข CSS ของตัวเองเพราะด้วย CSS ทั่วโลกของคุณคุณไม่สามารถทำอะไรได้เลย

แทนที่CSS โดเมนอื่น iframe

ด้วยการใช้ส่วนหนึ่งของคำตอบของ SimpleSam5ฉันได้รับสิ่งนี้ด้วย iframes การแชทของ Tawk ( ส่วนต่อประสานการปรับแต่งของพวกเขานั้นใช้ได้ แต่ฉันต้องการการปรับแต่งเพิ่มเติม)

ใน iframe นี้ที่ปรากฏบนอุปกรณ์พกพาฉันต้องซ่อนไอคอนเริ่มต้นและวางภาพพื้นหลังของฉัน ฉันทำต่อไปนี้:

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

ฉันไม่ได้เป็นเจ้าของโดเมน Tawk ใด ๆ และสิ่งนี้ใช้ได้ผลสำหรับฉันดังนั้นคุณอาจทำสิ่งนี้แม้ว่าจะไม่ได้มาจากโดเมนหลักเดียวกัน (แม้จะมีความคิดเห็นของ Jeremy Beckerเกี่ยวกับคำตอบของ Sam)

รหัสนี้ใช้ JavaScript วานิลลา มันสร้าง<style>องค์ประกอบใหม่ มันตั้งค่าเนื้อหาข้อความขององค์ประกอบนั้นเป็นสตริงที่มี CSS ใหม่ และผนวกองค์ประกอบนั้นเข้ากับส่วนหัวของเอกสาร iframe โดยตรง

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

หากคุณมีการควบคุมหน้าเว็บที่โฮสต์ iframe และหน้าของ iframe คุณสามารถส่งพารามิเตอร์การสืบค้นไปยัง iframe ...

นี่คือตัวอย่างในการเพิ่มคลาสให้กับ iframe โดยขึ้นอยู่กับว่าเว็บไซต์โฮสติ้งเป็นอุปกรณ์เคลื่อนที่หรือไม่

การเพิ่ม iFrame:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

ข้างใน iFrame:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

ฉันมีบล็อกและมีปัญหาในการค้นหาวิธีปรับขนาดส่วนที่ฝังตัวของฉัน ผู้จัดการโพสต์อนุญาตให้คุณเขียนข้อความวางรูปภาพและฝังโค้ด HTML เท่านั้น เค้าโครงบล็อกตอบสนองเอง มันสร้างด้วย Wix อย่างไรก็ตาม HTML ในตัวไม่ใช่ ฉันอ่านมากเกี่ยวกับวิธีการปรับขนาดส่วนประกอบภายในร่างกายของ iFrames ที่สร้างขึ้น ดังนั้นนี่คือคำแนะนำของฉัน:

หากคุณมีองค์ประกอบเดียวภายใน iFrame ของคุณเช่นส่วนสำคัญของคุณคุณสามารถปรับขนาดเฉพาะส่วนสำคัญได้ ลืมเกี่ยวกับ iFrame

ฉันมีปัญหากับวิวพอร์ต, เลย์เอาต์เฉพาะกับตัวแทนผู้ใช้ที่แตกต่างกันและนี่คือสิ่งที่แก้ไขปัญหาของฉัน:

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

ตรรกะคือการตั้งค่าส่วนสำคัญ (หรือส่วนประกอบของคุณ) CSS ตามตัวแทนผู้ใช้ ตรวจสอบให้แน่ใจว่าได้ระบุองค์ประกอบของคุณก่อนที่จะนำไปใช้กับตัวเลือกแบบสอบถาม อย่าลังเลที่จะดูว่าการตอบสนองนั้นทำงานอย่างไร

บางทีมันอาจจะเปลี่ยนไป แต่ฉันได้ใช้สไตล์ชีทแยกกับองค์ประกอบนี้:

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

หากต้องการสไตล์ให้ฝัง youtube iframes สำเร็จ ... ดูโพสต์บล็อกในหน้านี้

ให้ ID ของหน้า iframe แก่คุณ (หรือคลาสหากคุณต้องการ)

<html>
<head></head>
<body id="myId">
</body>
</html>

จากนั้นภายในหน้าของ iframe ให้กำหนดพื้นหลังให้กับใน CSS

#myId {
    background-color: white;
}