iframe에 CSS를 적용하는 방법

 

질문 : iframe에 CSS를 적용하는 방법은 무엇입니까?

---

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" />
                

또는 Javascript를 사용하여 상위 페이지에서로드 할 수 있습니다.

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

출처 : https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe