CSS를 iframe에 적용하는 방법?

RSS 링크를 표시하기 위해 iframe 섹션이있는 간단한 페이지가 있습니다. 기본 페이지에서 iframe에 표시된 페이지에 동일한 CSS 형식을 적용하려면 어떻게해야합니까?

편집 : 적절한 CORS 헤더 가 설정되어 있지 않으면 도메인 간 작동하지 않습니다 .

여기에는 iframe 블록 스타일과 iframe에 포함 된 페이지 스타일의 두 가지가 있습니다. 일반적인 방법으로 iframe 블록의 스타일을 설정할 수 있습니다.

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

iframe에 포함 된 페이지의 스타일은 하위 페이지에 포함시켜 설정해야합니다.

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

또는 자바 스크립트를 사용하여 상위 페이지에서로드 할 수 있습니다.

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

Google 캘린더 에서이 문제를 해결했습니다 . 어두운 배경에서 스타일을 지정하고 글꼴을 변경하고 싶었습니다.

다행히도 임베드 코드의 URL에는 직접 액세스에 대한 제한이 없었으므로 PHP 기능을 사용 file_get_contents하면 페이지에서 전체 컨텐츠를 가져올 수 있습니다. Google URL을 호출하는 대신 서버에있는 PHP 파일을 호출 할 수 있습니다 (예 : google.php여기에는 수정 된 원본 콘텐츠가 포함됩니다.

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

스타일 시트에 경로 추가하기 :

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

이렇게하면 스타일 시트가 head종료 태그 바로 앞에 배치됩니다 .

css와 js가 상대적으로 호출되는 경우 원래 URL에서 기본 URL을 지정하십시오.

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

최종 google.php파일은 다음과 같아야합니다.

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

그런 다음 iframe포함 코드를 다음과 같이 변경합니다 .

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

행운을 빕니다!

iframe의 컨텐츠가 완전히 제어되지 않거나 다른 스타일의 다른 페이지에서 컨텐츠에 액세스하려는 경우 JavaScript를 사용하여 조작 할 수 있습니다.

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

사용하는 브라우저에 따라 동일한 도메인에서 제공되는 페이지에서만 작동 할 수 있습니다.

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

iframe은 대부분의 브라우저에서 다른 HTML 페이지처럼 보편적으로 처리됩니다. 동일한 스타일 시트를 iframe의 컨텐츠에 적용하려면 여기에 사용 된 페이지에서 해당 스타일 시트를 참조하십시오.

다음은 <link>추가 스타일 시트를로드 하지 않고 CSS 코드를 직접 적용하는 방법 입니다.

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

iframe 페이지에서 배너를 숨 깁니다. 제안 해 주셔서 감사합니다!

교수형에 따르면 iframe에서 페이지를 제어하는 ​​경우 가장 쉬운 방법은 일반적인 스타일로 공유 CSS 파일을 만든 다음 HTML 페이지에서 해당 파일에 연결하는 것입니다.

그렇지 않으면 iframe의 외부 페이지에서 페이지 스타일을 동적으로 변경할 수 없을 것입니다. 스푸핑 및 기타 해킹에 대한 오용으로 인해 브라우저가 크로스 프레임 DOM 스크립팅의 보안을 강화했기 때문입니다.

이 튜토리얼 은 일반적으로 iframe 스크립팅에 대한 자세한 정보를 제공합니다. 크로스 프레임 스크립팅 정보 는 IE 관점에서 보안 제한 사항을 설명합니다.

약간의 변화가있는 위의 내용은 작동합니다.

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

적어도 ff3 및 ie8에서 잘 작동합니다.

메인 페이지에서 CSS와 JavaScript를 재사용하려면 <IFRAME>Ajax로로드 된 컨텐츠로 교체 하는 것이 좋습니다. 검색 로봇이 JavaScript를 실행할 수있을 때 SEO에 더욱 친숙합니다.

이것은 문서에 다른 HTML 페이지를 포함하는 jQuery 예제입니다. 이것은보다 SEO 친화적 iframe입니다. 봇이 포함 된 페이지의 색인을 생성하지 않도록하려면 허용하지 않도록 추가하십시오.robots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

Google에서 직접 jQuery를 포함 할 수도 있습니다 : http://code.google.com/apis/ajaxlibs/documentation/- 최신 버전을 자동으로 포함하고 속도를 크게 높일 수 있습니다. 또한 jQuery 만 제공하기 위해 신뢰해야한다는 것을 의미합니다.)

다음은 나를 위해 일했습니다.

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

프레임 내용 로딩 지연에 대처하기 위해 위의 jQuery 솔루션을 확장합니다.

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

내 컴팩트 버전 :

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

그러나 때로는 iframe창에로드되지 않은 상태이므로 timer를 사용해야 합니다 .

즉시 사용 가능한 코드 (타이머 포함) :

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

... 그리고 jQuery 링크 :

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

다른 답변은 jQuery와 CSS 링크를 사용하는 것 같습니다.

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

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

"doc.open ()"이라고 말하면 iframe 안에 HTML 태그를 작성할 수 있으므로 HTML 페이지에 대한 모든 기본 태그를 작성해야하며 iframe 헤드에 CSS 링크를 사용하려면 CSS 링크가있는 iframe. 예를 들어 보겠습니다.

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

사용은 이것을 시도 할 수 있습니다 :

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

이런 식으로 iframe의 내용을 스타일링 할 수 없습니다. 서버 측 스크립팅 (PHP, ASP 또는 Perl 스크립트)을 사용하거나 피드를 JavaScript 코드로 변환 할 온라인 서비스를 찾는 것이 좋습니다. 서버 측 포함을 수행 할 수있는 유일한 방법입니다.

iframe 페이지에 액세스 할 수 있고 페이지에서 iframe을 통해로드 할 때만 다른 CSS를 적용하려는 경우 여기에서 이러한 종류의 솔루션을 찾았습니다.

iframe이 다른 도메인을로드하는 경우에도 작동합니다

에 대해 확인 postMessage()

계획은 CSS를 iframe에 다음과 같은 메시지로 보냅니다.

iframenode.postMessage('h2{color:red;}','*');

* iframe의 도메인에 관계없이이 메시지를 보내는 것입니다

iframe에서 메시지를 수신하고 수신 된 메시지 (CSS)를 해당 문서 헤드에 추가합니다.

iframe 페이지에 추가 할 코드

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

동일한 도메인에 대해 많은 답변이 작성되므로 교차 도메인에서이를 수행하는 방법을 작성하겠습니다.

먼저, Post Message API 를 알아야합니다 . 두 창 사이에서 통신하려면 메신저가 필요합니다.

여기 내가 만든 메신저가 있습니다.

/**
 * Creates a messenger between two windows
 *  which have two different domains
 */
class CrossMessenger {

    /**
     * 
     * @param {object} otherWindow - window object of the other
     * @param {string} targetDomain - domain of the other window
     * @param {object} eventHandlers - all the event names and handlers
     */
    constructor(otherWindow, targetDomain, eventHandlers = {}) {
        this.otherWindow = otherWindow;
        this.targetDomain = targetDomain;
        this.eventHandlers = eventHandlers;

        window.addEventListener("message", (e) => this.receive.call(this, e));
    }

    post(event, data) {

        try {
            // data obj should have event name
            var json = JSON.stringify({
                event,
                data
            });
            this.otherWindow.postMessage(json, this.targetDomain);

        } catch (e) {}
    }

    receive(e) {
        var json;
        try {
            json = JSON.parse(e.data ? e.data : "{}");
        } catch (e) {
            return;
        }
        var eventName = json.event,
            data = json.data;

        if (e.origin !== this.targetDomain)
            return;

        if (typeof this.eventHandlers[eventName] === "function") 
            this.eventHandlers[eventName](data);
    }

}

이것을 두 개의 창에서 사용하여 통신하면 문제를 해결할 수 있습니다.

기본 창에서

var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");

var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
   css: cssContent
})

그런 다음 Iframe에서 이벤트를 수신하십시오.

Iframe에서 :

var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
    cssContent: (data) => {
        var cssElem = document.createElement("style");
        cssElem.innerHTML = data.css;
        document.head.appendChild(cssElem);
    }
})

자세한 내용은 Complete Javascript and Iframes tutorial을 참조하십시오.

이런 식으로 기본 HTML에 스타일을 넣는 다른 솔루션을 찾았습니다.

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

그런 다음 iframe 에서이 작업을 수행하십시오 (js onload 참조)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

그리고 js에서

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

최상의 해결책은 아니지만 확실히 개선 될 수 있지만 부모 창에 "스타일"태그를 유지하려는 경우 다른 옵션입니다.

도메인 내부에는 두 가지가 있습니다.

1. iFrame 섹션
2. iFrame 내부에로드 된 페이지

따라서이 두 섹션의 스타일을 다음과 같이 지정하려고합니다.

1. iFrame 섹션 스타일

존중 id하거나 class이름이있는 CSS를 사용하여 스타일을 지정할 수 있습니다 . 부모 스타일 시트에서도 스타일을 지정할 수 있습니다.

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. iFrame 안에로드 된 페이지 스타일 지정

이 스타일은 자바 스크립트를 사용하여 상위 페이지에서로드 할 수 있습니다.

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.href = "iFramePage.css"; 

그런 다음 해당 CSS 파일을 관련 iFrame 섹션으로 설정하십시오.

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

여기에서도이 방법으로 iFrame 내부의 페이지 헤드 부분을 편집 할 수 있습니다

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));

스타일 태그를 iframe에 삽입 할 수 있습니다. 여기에 게시 됨 ...

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>

가장 쉬운 방법은 iframe과 같은 곳에 다른 div를 추가하는 것입니다.

그 만들 z-index자신 사업부 easly 단지 스타일 수 있도록 iframe이 컨테이너보다 큰. 당신이 그것을 클릭 해야하는 경우, 그냥 사용pointer-events:none 자신의 div를 사용하면 iframe을 클릭 해야하는 경우 iframe이 작동합니다.)

누군가에게 도움이되기를 바랍니다.)

이 멋진 스크립트 자체의 iframe이 버전 노드를 대체합니다. CodePen 데모

사용 예 :

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

대안으로 아래 lib와 같이 CSS-in-JS 기술을 사용할 수 있습니다.

https://github.com/cssobj/cssobj

JS 객체를 CSS로 iframe에 동적으로 주입 할 수 있습니다.

이것은 개념 일 뿐이지 만 보안 검사 및 필터링 없이는 구현하지 마십시오! 그렇지 않으면 스크립트가 사이트를 해킹 할 수 있습니다!

답변 : 대상 사이트를 제어하는 ​​경우 다음과 같이 수신자 스크립트를 설정할 수 있습니다.

1) 다음과 같이 iframe 링크를 style매개 변수로 설정하십시오 .

http://your_site.com/target.php?color=red

(마지막 문구는 기능에 a{color:red} 의해 인코딩됩니다 urlencode.

2) 수신자 페이지를 다음 target.php과 같이 설정하십시오 .

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

글쎄, 나는 다음 단계를 따랐다.

1. 수업이있는 div iframe
2. 에 추가 iframe하십시오 div.
3. CSS 파일에서

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

이것은 IE 6에서 작동합니다. 다른 브라우저에서 작동하려면 확인하십시오!