Ghi đè kiểu cơ thể cho nội dung trong iframe

Làm cách nào tôi có thể kiểm soát hình ảnh nền và màu sắc của một yếu tố cơ thể trong một iframe? Lưu ý, phần tử cơ thể nhúng có một lớp và iframelà một trang là một phần của trang web của tôi.

Lý do tôi cần điều này là trang web của tôi có nền đen được gán cho cơ thể và sau đó nền trắng được gán cho div có chứa văn bản. Trình iframechỉnh sửa WYSIWYG sử dụng nội dung để nhúng khi chỉnh sửa, nhưng nó không bao gồm div, vì vậy văn bản rất khó đọc.

Phần thân của iframetrình soạn thảo có một lớp không được sử dụng ở bất kỳ nơi nào khác, vì vậy tôi cho rằng điều này được đặt ở đó để những vấn đề như thế này có thể được giải quyết. Tuy nhiên, khi tôi áp dụng các kiểu cho class.bodychúng, chúng sẽ không ghi đè lên các kiểu được áp dụng cho cơ thể. Điều kỳ lạ là các phong cách xuất hiện trong Fireorms, vì vậy tôi không biết chuyện gì đang xảy ra!

Cảm ơn

CẬP NHẬT - Tôi đã thử giải pháp của @ mikeq về việc thêm một kiểu cho lớp đó là lớp của cơ thể. Điều này không hoạt động khi được thêm vào biểu định kiểu của trang chính, nhưng nó hoạt động khi được thêm với Fireorms. Tôi cho rằng điều này là do Firebird được áp dụng cho tất cả các thành phần trên trang trong khi CSS không được áp dụng trong iframe. Điều này có nghĩa là thêm css sau khi tải cửa sổ với JavaScript sẽ hoạt động?

Một iframe là một 'lỗ hổng' trong trang của bạn hiển thị một trang web khác bên trong nó. Nội dung của iframe không ở bất kỳ hình dạng hoặc hình thức nào của trang mẹ của bạn.

Như những người khác đã nêu, các tùy chọn của bạn là:

• cung cấp cho tệp đang được tải trong iframe CSS cần thiết
• nếu tệp trong iframe là từ cùng một miền với cha mẹ của bạn, thì bạn có thể truy cập DOM của tài liệu trong iframe từ cha mẹ.

Dưới đây chỉ hoạt động nếu nội dung iframe là từ cùng một miền cha.

Các kịch bản jquery sau đây làm việc cho tôi. Đã thử nghiệm trên Chrome và IE8. Khung nội tuyến tham chiếu một trang nằm trên cùng một miền với trang mẹ.

Trong trường hợp cụ thể này, tôi đang ẩn một phần tử với một lớp cụ thể trong iframe bên trong.

Về cơ bản, bạn chỉ cần thêm phần tử 'kiểu' vào 'phần đầu' của iframe bên trong.

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

Bạn không thể thay đổi kiểu trang được hiển thị trong iframe trừ khi bạn có quyền truy cập trực tiếp và do đó quyền sở hữu các tệp html và / hoặc css nguồn.

Điều này là để dừng XSS (Cross Site Scripting)

An iframecó một phạm vi khác, vì vậy bạn không thể truy cập nó để tạo kiểu hoặc thay đổi nội dung của nó bằng javascript.

Về cơ bản là "một trang khác".

Điều duy nhất bạn có thể làm là chỉnh sửa CSS của chính nó, bởi vì với CSS toàn cầu của bạn, bạn không thể làm gì được.

Ghi đè CSS tên miền khác iframe

Bằng cách sử dụng một phần câu trả lời của SimpleSam5 , tôi đã đạt được điều này với một vài iframe trò chuyện của Tawk ( giao diện tùy chỉnh của chúng vẫn ổn nhưng tôi cần tùy chỉnh thêm).

Trong iframe cụ thể này hiển thị trên thiết bị di động, tôi cần ẩn biểu tượng mặc định và đặt một trong những hình nền của mình. Tôi đã làm như sau:

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

Tôi không sở hữu bất kỳ tên miền nào của Tawk và điều này hiệu quả với tôi, do đó bạn có thể làm điều này ngay cả khi nó không thuộc cùng miền cha mẹ (mặc dù nhận xét của Jeremy Beck về câu trả lời của Sam).

Mã này sử dụng JavaScript vanilla. Nó tạo ra một <style>yếu tố mới . Nó đặt nội dung văn bản của phần tử đó là một chuỗi chứa CSS mới. Và nó nối phần tử đó trực tiếp vào phần đầu của tài liệu 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);

Nếu bạn có quyền kiểm soát trang lưu trữ iframe và trang của iframe, bạn có thể chuyển tham số truy vấn cho iframe ...

Dưới đây là một ví dụ để thêm một lớp vào iframe dựa trên việc trang web lưu trữ có di động hay không ...

Thêm 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 ); 

Bên trong 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");
}

Tôi có một blog và tôi đã gặp rất nhiều khó khăn khi tìm cách thay đổi kích thước ý chính nhúng của mình. Trình quản lý bài đăng chỉ cho phép bạn viết văn bản, đặt hình ảnh và nhúng mã HTML. Bố cục blog là đáp ứng chính nó. Nó được xây dựng với Wix. Tuy nhiên, HTML nhúng thì không. Tôi đã đọc rất nhiều về việc không thể thay đổi kích thước các thành phần bên trong cơ thể của iFrames được tạo. Vì vậy, đây là gợi ý của tôi:

Nếu bạn chỉ có một thành phần bên trong iFrame của mình, tức là ý chính của bạn, bạn chỉ có thể thay đổi kích thước của ý chính. Hãy quên iFrame đi.

Tôi gặp vấn đề với chế độ xem, bố cục cụ thể cho các tác nhân người dùng khác nhau và đây là điều đã giải quyết vấn đề của tôi:

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

Logic là đặt css (hoặc thành phần của bạn) css dựa trên tác nhân người dùng. Hãy chắc chắn xác định thành phần của bạn trước, trước khi áp dụng cho bộ chọn truy vấn. Hãy xem phản ứng đang hoạt động như thế nào .

Có lẽ bây giờ nó đã thay đổi, nhưng tôi đã sử dụng một bản định kiểu riêng với phần tử này:

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

để thành công phong cách nhúng iframe youtube ... xem các bài đăng blog trên trang này .

cung cấp cho phần thân trang iframe của bạn một ID (hoặc lớp nếu bạn muốn)

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

sau đó, cũng trong trang của iframe, gán nền cho CSS trong

#myId {
    background-color: white;
}