iframe 내부의 div 스타일에 영향을 주기 위해 CSS 사용

iframe 내부의 div 스타일에 영향을 주기 위해 CSS 사용

CSS만을 사용하여 페이지의 iframe 안에 상주하는 div의 스타일을 변경할 수 있습니까?

JavaScript가 필요합니다.JavaScript 명령 앞에 iframe의 이름을 붙여야 한다는 점을 제외하고는 상위 페이지에서 수행하는 것과 동일합니다.

동일한 오리진 정책이 적용되므로 자신의 서버에서 전송되는 iframe 요소에만 이 작업을 수행할 수 있습니다.

프로토타입 프레임워크를 사용하면 다음과 같은 이점이 있습니다.

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

또는

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

간단히 말해서 아니오.

교차 도메인 리소스 제한으로 인해 iframe에 로드된 페이지를 제어하지 않는 한 iframe에 로드된 HTML에 CSS를 적용할 수 없습니다.

예. 자세한 내용은 이 다른 스레드를 참조하십시오.iframe에 CSS를 어떻게 적용합니까?

const cssLink = document.createElement("link");
cssLink.href  = "style.css";  
cssLink.rel   = "stylesheet";  
cssLink.type  = "text/css";  
frames['frame1'].contentWindow.document.body.appendChild(cssLink); 
//     ^frame1 is the #id of the iframe: <iframe id="frame1">

의 내용을 검색할 수 있습니다.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를 사용하여 소스가 로드될 때까지 기다립니다. 이렇게 달성했습니다(각도 간격 사용, javascript set 사용 가능).간격 방법):

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

여러 가지 해결책들을 결합하면, 이것이 저에게 효과가 있었습니다.

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

jQuery를 통해 수행할 수 있는 것으로 보입니다.

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

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

아마도 당신이 생각하는 방식이 아닐 것입니다.만약 그렇다면 해야 할 수밖에.<link>css 파일에도 있습니다.그리고 다른 도메인에 있는 경우 자바스크립트로도 할 수 없습니다.

iframe이 다른 서버에서 전송되는 경우 다음과 같은 CORS 오류가 발생합니다.

Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.

두 페이지를 모두 제어할 수 있는 경우에만 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 을 사용하여 다음과 같은 메시지를 안전하게 보낼 수 있습니다.

메인 사이트(iframe을 로드하는 사이트)에서:

const iframe = document.querySelector('#frame-id');
iframe.contentWindow.postMessage(/*any variable or object here*/, 'https://iframe-site.example.com');

iframe 사이트:

// Called sometime after postMessage is called
window.addEventListener("message", (event) => {
  // Do we trust the sender of this message?
  if (event.origin !== "http://your-main-site.com")
    return;
...
...
  
});

클라이언트 측에서는 불가능합니다. "Error: Iframe이 사용자 도메인의 일부가 아니기 때문에 "Document" 속성에 액세스할 수 있는 권한이 거부되었습니다"라는 Javascript 오류가 발생합니다.유일한 해결책은 서버 측 코드에서 페이지를 가져와서 필요한 CSS를 변경하는 것입니다.

유진이 말한 것과 같은 일종의 해킹 방식입니다.저는 결국 그의 코드를 따라 페이지에 대한 제 커스텀 CSS에 링크하게 되었습니다.저에게 문제는 트위터 타임라인에서 트위터의 코드를 무시하기 위해 트위터의 사이드 스텝을 수행해야 한다는 것입니다.이제 우리는 CSS가 있는 롤링 타임라인을 가지고 있습니다. 즉, 더 큰 글꼴, 적절한 선 높이, 그리고 높이에 대한 스크롤 막대를 한계보다 더 크게 숨깁니다.

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

네, 번거롭지만 가능합니다.당신은 페이지의 HTML을 당신의 페이지 본문에 인쇄/에코화한 후 CSS 규칙 변경 기능을 적용해야 할 것입니다.위에 제시된 동일한 예를 사용하면 페이지에서 div를 찾은 다음 CSS를 적용하여 최종 사용자에게 다시 인쇄/에코잉하는 구문 분석 방법을 사용할 수 있습니다.저는 이것이 필요하지 않기 때문에 다른 웹 페이지의 CSS의 모든 항목에 해당 기능을 코딩하여 적용하고 싶지 않습니다.

참조:

• IFRAME의 내용 인쇄
• PHP 또는 JavaScript를 사용하여 HTML 소스 코드 액세스 및 인쇄
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

언급URL : https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe