[Html] iframe에 CSS를 적용하는 방법은 무엇입니까?


Answers

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

다행히 embed 코드의 URL은 직접 액세스에 제한이 없으므로 PHP 함수 file_get_contents 를 사용하면 페이지의 전체 내용을 가져올 수 있습니다. Google URL을 호출하는 대신 서버에있는 PHP 파일 (예 : exe)을 호출 할 수 있습니다. 수정 된 원본 콘텐츠가 포함 된 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>

행운을 빕니다!

Question

일부 iframe 섹션 (RSS 링크 표시)이있는 간단한 페이지가 있습니다. 메인 페이지에서 동일한 CSS 형식을 iframe에 표시된 페이지에 어떻게 적용 할 수 있습니까?




이것을 사용해 볼 수 있습니다 :

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



위의 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();
});



Iframe 페이지에 대한 액세스 권한이 있고 페이지의 iframe을 통해로드 할 때만 다른 CSS를 적용하려면 여기에서 이러한 종류의 것들에 대한 해결책을 찾았습니다.

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

postMessage() 에 대해 확인하십시오.

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

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

});



hangy가 말했듯이 iframe에서 페이지를 제어하는 ​​가장 쉬운 방법은 일반적인 스타일로 공유 CSS 파일을 만든 다음 HTML 페이지에서 링크로 연결하는 것입니다.

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

이 튜토리얼 은 일반적으로 iframe 스크립팅에 대한 추가 정보를 제공 할 수 있습니다. 교차 프레임 스크립팅 은 IE의 보안 제한 사항을 설명합니다.




이 방법으로 iframe의 내용에 스타일을 적용 할 수 없습니다. 내 제안은 서버 측 스크립트 (PHP, ASP 또는 Perl 스크립트)를 사용하거나 피드를 JavaScript 코드로 변환하는 온라인 서비스를 찾는 것입니다. 서버 사이드 포함을 할 수 있다면 다른 방법이 될 것입니다.




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

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



가장 좋은 방법은 다음과 같습니다 (대상 사이트를 제어하는 ​​경우).

1) 다음과 같이 style 매개 변수로 iframe 링크를 설정합니다.

http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D

(마지막 구는 urlencode 함수로 인코딩 된 a{color:red} 입니다.

2) 다음과 같이 수신기 페이지 target.php 설정합니다.

<head>
..........
<style><? echo urldecode($_GET['style']);?> </style>
..........



글쎄, 나는이 단계들을 따라왔다.

  1. iframe 을 보유 할 수업 iframe
  2. div iframe 을 추가하십시오.
  3. CSS 파일에서,
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

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




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

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    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>



위의 약간의 변경 사항이 적용됩니다.

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과 잘 작동합니다.




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

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

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

1. iFrame 섹션의 스타일

CSS는 해당 id 또는 class 이름으로 스타일을 지정할 수 있습니다. 상위 스타일 시트에서도 스타일을 지정할 수 있습니다.

<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에로드 된 페이지 스타일 지정

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

var cssFile  = document.createElement("link") 
cssLink.rel  = "stylesheet"; 
cssLink.type = "text/css"; 
cssLink.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" }
     ));