iframe의 내용에 대해 본문 스타일 재정의

iframe의 내용에 대해 본문 스타일 재정의

의 와 을 하려면 의 하려면 와 을 iframe, ? 로, 는 를 ,iframe제 사이트의 일부분인 페이지입니다.

제가 이것이 필요한 이유는 제 사이트에 본문에 검은색 배경이 할당되어 있고, 그 다음에 텍스트가 포함된 디브에 흰색 배경이 할당되어 있기 때문입니다.는 WYSIWYG는다을합니다를 합니다.iframe편집할 때 내용을 삽입하는 것인데 디브가 포함되어 있지 않아서 텍스트를 읽기가 매우 어렵습니다.

의 몸.iframe에디터 안에 다른 곳에서는 사용하지 않는 클래스가 있을 때, 저는 이것이 이와 같은 문제를 해결할 수 있도록 거기에 놓였을 것이라고 추측합니다.o에 할 때.class.body에 그 일인지 모르겠어요이상한 점은 파이어버그에 스타일이 등장해서 무슨 일인지 모르겠어요!

감사해요.

업데이트 - 몸의 클래스인 클래스에 스타일을 추가하는 @mikeq의 솔루션을 시도해 보았습니다.메인 페이지의 스타일시트에 추가하면 작동하지 않지만 Firebug와 함께 추가하면 작동합니다.iframe 내에는 CSS가 적용되지 않는 반면, 페이지 내의 모든 요소에는 Firebug가 적용되기 때문이라고 추측합니다.이것은 자바스크립트로 윈도우 로드 후 css를 추가하는 것이 가능하다는 것을 의미합니까?

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

다음 코드가 저에게 적합합니다.Chrome과 IE8에서 테스트했습니다.내부 아이프레임은 상위 페이지와 동일한 도메인에 있는 페이지를 참조합니다.

이 경우 내부 아이프레임에 특정 클래스를 가진 요소를 숨깁니다.

으로, 은, ...style프레임에 적재된 문서의 머리 부분 요소:

frame.addEventListener("load", ev => {
    const new_style_element = document.createElement("style");
    new_style_element.textContent = ".my-class { display: none; }"
    ev.target.contentDocument.head.appendChild(new_style_element);
});

대신에도 가능합니다.style link요소: 스타일시트 리소스를 참조합니다.

iframe은 페이지의 '구멍'으로, 페이지 안에 다른 웹 페이지를 표시합니다.iframe의 내용이 상위 페이지의 모양이나 양식에 없습니다.

다른 사람들이 언급한 바와 같이, 여러분의 선택사항은 다음과 같습니다.

• iframe에 로드되는 파일에 필요한 CSS를 제공합니다.
• iframe의 파일이 상위 도메인과 동일한 도메인에 있을 경우, 상위 도메인에서 iframe의 문서의 DOM에 접근할 수 있습니다.

iframe에 표시되는 페이지 스타일은 직접 액세스할 수 없으며 따라서 소스 html 및/또는 css 파일의 소유권을 가지지 않는 한 변경할 수 없습니다.

XSS(사이트 간 스크립팅)를 중지하기 위한 것입니다.

이 코드는 바닐라 자바스크립트를 사용합니다.그것은 새로운 것을 만듭니다.<style>◦. 을 새로운 합니다.해당 요소의 텍스트 내용을 새로운 CSS를 포함하는 문자열로 설정합니다.그리고 이 요소를 iframe 문서의 머리 부분에 직접 추가합니다.

에서 로드된 은 ( 허용되지 -- ① (②) ② (③) ③ (④) ④ ⑤ ⑤ ⑥ ⑦ 하는 되지 은 에 의 의 에서 된 로 되지 은 하는 contentDocumentiframe요소는 프레임을 포함하는 페이지의 탐색 컨텍스트에서 시도하면 null로 평가됩니다.

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

다른 도메인 재정의 iframeCSS

SimpleSam5의 답변 일부를 사용하여 Tawk의 채팅 프레임 몇 개로 이를 달성했습니다(그들의 커스터마이징 인터페이스는 괜찮지만 추가 커스터마이징이 필요했습니다).

특히 모바일 기기에 나타나는 프레임의 경우 기본 아이콘을 숨기고 배경 이미지 중 하나를 배치해야 했습니다.저는 다음과 같이 했습니다.

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의 언급에도 불구하고) 이렇게 할 수 있습니다.

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

기본적으로 "또 하나의 페이지"입니다.

글로벌 CSS로는 아무것도 할 수 없기 때문에 자체 CSS를 편집하는 것만이 가능합니다.

이것은 교차 도메인에서 작동할 것입니다. 둘 다 소유자인 경우.

여기서의 요령은 당신의 몸에 글로벌 cs 변수를 할당하고, 새로운 색으로 메시지를 듣고, 메시지를 받으면 글로벌 cs 변수를 변경하는 것입니다.

앵글을 사용하고 있지만 순수 자바스크립트로 작동이 가능합니다.

사용 사례는 iframe에서 웹 사이트를 저장하기 전에 색상 변경이 웹 사이트에 어떤 영향을 미칠지 사용자에게 보여주는 것이었습니다.

도메인 A

@ViewChildren('iframeContainer') iframeContainer: QueryList<ElementRef>

sendDataToIframe(
  data = {
      type: 'colorChange',
      colors: {primary: '#000', secondary: '#fff'},
  },
): void {
  if (this.targetUrl)
    this.iframeContainer.first.nativeElement.contentWindow.postMessage(data) // You may use document.getElementById('iframeContainer') instead
}

도메인 B

acceptedEditOrigins = [
  'https://my.origine.ccom', // Be sur to have a correct origin, to avoid xss injecto: https://en.wikipedia.org/wiki/Cross-site_scripting
]

constructor() {
// Listen to message
window.addEventListener('message', (event) => this.receiveMessage(event), false)
}

receiveMessage(event: MessageEvent) {
  if (this.acceptedEditOrigins.includes(event.origin))
    switch (event.data.type) {
      case 'colorChange': {
        this.setWebsiteConfigColor(event.data.colors)
      }
    }
}

setWebsiteConfigColor(colors: WebsiteConfigColors) {
  if (colors) {
    const root = document.documentElement
    for (const [key, value] of Object.entries(colors)) {
       root.style.setProperty(`--${key}`, value) // --primary: #000, --secondary: #fff
    }
  }
}

body {
  background-color: var(--primary);
}

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

iframe에 대해서만 다음과 같은 작업을 수행할 수 있습니다.

document.querySelector('iframe').contentDocument.body.style.backgroundColor = '#1e1e2d';

여러 개의 iframe이 있는 경우:

document.querySelectorAll('iframe').forEach((iframe) => {
    iframe.contentDocument.body.style.backgroundColor = '#1e1e2d';
});

지금은 바뀐 것 같지만, 이 요소가 있는 별도의 스타일시트를 사용했습니다.

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

iframe 페이지 본문에 ID(또는 원한다면 클래스)를 지정합니다.

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

그런 다음 iframe의 페이지 내에서도 CSS에 있는 것에 배경을 할당합니다.

#myId {
    background-color: white;
}

언급URL : https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe