iframe 내부에 iframe 내부에 정의 된 CSS 클래스를 사용하십시오.

Question

<style> 태그를 삭제하는 콘텐츠 관리 시스템이 있습니다. 해결 방법으로 내 클래스에 <style> 태그가있는 iframe을 구현하고 iframe 외부에서 이러한 클래스를 사용하고 싶습니다. 이 작업을 수행하는 방법을 알고 있습니까? 가능한가?

Answer 1

내가 맞다면, iframe (다른 웹 페이지) 내에 정의 된 css styles을 재사용하고 싶습니까? 의 styles을 모두 javascript과 추가 할 수 있습니다. 다음은 그 예입니다.

jsfiddle: styles you want to reuse

안에 하나의 css rule있다 (데모 용으로 만 위해), 그러나 당신이 원하는만큼있을 수 있습니다. 이제 해당 클래스를 다시 사용하십시오 (.someclass).

jsfiddle: reused styles

당신은 contentWindow를 통해 iframe이 문서를 액세서 수 있습니다.

var exampleIFrame = document.getElementById('exampleiframe'); 
var exampleIFrameStyles = exampleIFrame.contentWindow.document.getElementsByTagName('style'); 

그런 다음 현재 문서의 head에 모든 iframe 스타일을 추가합니다. styles을 모두 하나로 병합했습니다.

var tmpStyle = document.createElement('style'); 
tmpStyle.id = "iframe-style"; 
for (var i = 0; i < exampleIFrameStyles.length; ++i) { 
    tmpStyle.appendChild(document.createTextNode(exampleIFrameStyles[i].innerHTML)); 
} 
document.head.appendChild(tmpStyle); 

피들을 참조하십시오. 도움이 되었길 바래요!