html 깨짐 상속 - iframe에 CSS를 적용하는 방법은 무엇입니까?



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

행운을 빕니다!

스타일 컨트롤 제어

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




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

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



hangy가 말했듯이 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과 잘 작동합니다.




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

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



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




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

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



나는이 같은 메인 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>

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




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

z-index iframe 컨테이너보다 크게 만들면 easly 자신의 div 스타일을 지정할 수 있습니다. 그것을 클릭해야하는 경우 pointer-events:none 사용하십시오 pointer-events:none 자신의 div에 pointer-events:none 없으므로 iframe을 클릭해야 할 수도 있습니다.)

나는 그것이 누군가를 도울 것이기를 바란다.)




var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);




다른 방법으로, 아래 lib와 같은 CSS-in-JS 기술을 사용할 수 있습니다.

https://github.com/cssobj/cssobj

CSS로 JS 오브젝트를 iframe에 주입 할 수 있습니다.




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

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

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




Related