iframe의 콘텐츠에 대한 바디 스타일 재정의

iframe? 내의 바디 요소의 배경 이미지와 색상을 어떻게 제어 할 수 있습니까? 임베디드 본문 요소에는 클래스 iframe가 있으며 내 사이트의 일부인 페이지입니다.

내가 필요한 이유는 내 사이트에 본문에 검은 색 배경이 할당 된 다음 텍스트가 포함 된 div에 흰색 배경이 할당되어 있기 때문입니다. WYSIWYG 편집기는 iframe편집시 내용을 포함 하기 위해를 사용 하지만 div를 포함하지 않으므로 텍스트를 읽기가 매우 어렵습니다.

iframe에디터 의 when 본문에는 다른 곳에서는 사용되지 않는 클래스가 있으므로이 문제가 해결 될 수 있다고 가정합니다. 그러나 class.body스타일을 적용하면 본문에 적용된 스타일이 재정의되지 않습니다. 이상한 점은 스타일이 Firebug에 나타나기 때문에 무슨 일이 일어나고 있는지 전혀 모른다는 것입니다!

감사

업데이트-나는 몸의 클래스 인 클래스에 스타일을 추가하는 @mikeq의 솔루션을 시도했습니다. 기본 페이지의 스타일 시트에 추가하면 작동하지 않지만 Firebug와 함께 추가하면 작동합니다. Firebug가 페이지의 모든 요소에 적용되는 반면 CSS는 iframe 내에 적용되지 않기 때문입니다. 이것은 JavaScript로 창로드 후 CSS를 추가하면 작동합니까?

iframe은 페이지 내부에 다른 웹 페이지를 표시하는 '구멍'입니다. iframe의 내용은 부모 페이지의 형태 나 형태가 아닙니다.

다른 사람들이 말했듯이 귀하의 옵션은 다음과 같습니다.

• iframe에로드중인 파일에 필요한 CSS를 제공하십시오
• iframe의 파일이 부모와 동일한 도메인에있는 경우 부모에서 iframe에있는 문서의 DOM에 액세스 할 수 있습니다.

아래는 iframe 콘텐츠가 동일한 상위 도메인에서 온 경우에만 작동합니다.

다음 jquery 스크립트가 나를 위해 작동합니다. Chrome 및 IE8에서 테스트되었습니다. 내부 iframe은 상위 페이지와 동일한 도메인에있는 페이지를 참조합니다.

이 특별한 경우에는 내부 iframe에 특정 클래스가있는 요소를 숨기고 있습니다.

기본적으로 내부 iframe의 'head'에 'style'요소를 추가하기 만하면됩니다.

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

소스 html 및 / 또는 CSS 파일에 직접 액세스 할 수있는 권한 이 없으면 iframe에 표시되는 페이지 스타일을 변경할 수 없습니다 .

XSS (Cross Site Scripting) 를 중지합니다.

에 iframe다른 범위가 있으므로 자바 스크립트를 사용하여 스타일을 지정하거나 내용을 변경할 수 없습니다.

기본적으로 "다른 페이지"입니다.

글로벌 CSS를 사용하면 아무것도 할 수 없기 때문에 자신의 CSS를 편집하는 것이 유일한 방법입니다.

다른 도메인 iframe CSS 재정의

SimpleSam5의 답변 중 일부를 사용하여 몇 가지 Tawk의 채팅 iframe 으로이 작업을 수행했습니다 ( 사용자 정의 인터페이스 는 훌륭하지만 추가 사용자 정의가 필요했습니다).

휴대 기기에 표시되는이 특정 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의 도메인을 가지고 있지 않으며 이것이 나를 위해 일했기 때문에 동일한 부모 도메인이 아닌 경우 에도이 작업을 수행 할 수 있습니다 ( Sam의 대답에 대한 Jeremy Becker의 의견 에도 불구하고 ).

이 코드는 바닐라 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은 그렇지 않습니다. 생성 된 iFrame의 본문 내부에서 구성 요소의 크기를 조정하는 것이 불가능한 방법에 대해 많이 읽었습니다. 그래서, 여기 내 제안이 있습니다 :

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 iframe의 스타일을 성공적으로 지정 하려면 ... 이 페이지의 블로그 게시물을 참조하십시오 .

iframe 페이지의 본문에 ID (또는 원하는 경우 수업)를 제공하십시오.

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

그런 다음 iframe 페이지에서도 CSS의 배경을 지정하십시오.

#myId {
    background-color: white;
}