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

Program / 글쓴이

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 파일에도 있어야합니다 . 그리고 다른 도메인에 있으면 자바 스크립트로도 할 수 없습니다.