CSS를 사용하여 iframe 내부의 div 스타일에 영향

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

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

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

내가 사용하는 프로토 타입 쉽도록 프레임 워크를 :

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

또는

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

한마디로

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

예. 자세한 내용은이 다른 스레드를 살펴보십시오. CSS를 iframe에 적용하는 방법은 무엇입니까?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 

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를 사용하고 소스가로드 될 때까지 기다리십시오.

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

아마 당신이 생각하는 방식이 아닙니다. iframe은 <link>CSS 파일에도 있어야합니다 . 그리고 다른 도메인에 있으면 자바 스크립트로도 할 수 없습니다.

분명히 jQuery를 통해 수행 할 수 있습니다.

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

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

유진에 따르면 일종의 해킹 방식이 일을한다. 나는 그의 코드를 따르고 페이지의 사용자 정의 CSS에 연결되었습니다. 나에게 문제는 트위터 타임 라인을 사용하면 코드를 smidgen을 무시하기 위해 트위터의 약간의 스테핑을해야한다는 것입니다. 이제 CSS가있는 롤링 타임 라인이 있습니다 .IE 더 큰 글꼴, 적절한 줄 높이 및 스크롤 막대가 제한보다 큰 높이에 숨겨져 있습니다.

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

다른 솔루션을 결합하면 이것이 나를 위해 일한 것입니다.

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

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