외부 iframe에 CSS 한 줄을 적용하는 방법은 무엇입니까?

Question

클라이언트의 웹 사이트에 외부 호스팅 iframe을 포함해야하며 본문 요소의 배경색을 변경하고 싶습니다.

<script type="text/javascript"> 
function makeitblackgoddamnit(){ 
    top.frames['bookings'].document.body.style.backgroundColor = "black"; 
} 
</script> 

<iframe src="http://www.booking.com/? 
aid=123456&tmpl=searchbox&ss=&width=250&bgcolor=000000&textcolor=FFFFFF 
&label=label"width="250px" style="margin-left:20px;border:none;" height="250px" 
frameborder="none" scrolling="no" style="background-color:black;" name="bookings" 
onload="javascript:makeitblackgoddamnit();"> 
</iframe> 

을했지만 작동하지 않습니다 나는 시도했다. 다른 버전도 시도했지만 외부 스타일 시트를로드하고 싶지 않습니다. JS 라이브러리를 사용할 수 없습니다. 도와 주시겠습니까?

Answer 1

수 없습니다. 원격 웹 사이트의 DOM에 대한 액세스 (읽기 또는 쓰기)를 허용하면 모든 종류의 불쾌한 공격을 허용하므로 browsers don't.

Answer 2

유일한 방법은 클라이언트의 웹 사이트에서 참조되는 CSS를 변경할 수있는 경우입니다. 그렇지 않으면 교차 도메인 iFrame에 할 수있는 일이 많지 않습니다.

Answer 3

iframe은 same origin policy의 영향을받으며 현재 및 iframe 도메인이 일치하지 않으면 JavaScript (또는 CSS, iirc)를 사용하여 상호 작용할 수 없습니다.

Answer 4

비슷한 문제가 있는데, 차이점은 jQuery를 사용하여 html을 삽입하는 iframe 소스를 실제로 설정하지 않는다는 것입니다. 내 문제는 iframe에 스타일 시트를 포함시키는 방법을 모른다는 것입니다. 코드 아래

확인 :

<button id="print1" onclick=" $('#frame1').contents().find('body').html($('#div1').html() + $('#tabs-4').html() + $('#tabs-5').html()+ $('#tabs-6').html()); window.frames['frame1'].print();">Print full report</button> 
<iframe id="frame1" style="visibility:hidden;" height=1px></iframe>