본문 바로가기
개발/javascript

javascript iframe 투명화 allowTransparency 적용 안될 때

by 낭만기사 2020. 8. 24.
반응형

iframe을 투명화 해주는 방법으로 보통 allowTransparency를 아이프레임에 적용하고 불러올 iframe 안에 background:transparent를 적용 합니다.

 // 웹페이지 iframe에 allowTransparency 적용
<iframe src="웹페이지 주소" allowTransparency="true" width="가로크기" height="세로크기></iframe>
//iframe에 body에 background:transparent 적용
<body style="background:transparent;"> 

document.all.frame1.allowTransparency를 콘솔로 입력해도 투명화가 동작하지 않았음. 

 

크롬 브라우저 콘솔

 

나의 경우에는 javascript로 frame1의 allowTransparency를 아래와 같이 수정해도 동작하지 않았다. 

  function function1() {
    document.all.frame1.allowTransparency = "true";
  } 
 <iframe id="frame1" src="주소" allowTransparency="true" style="width:200;"> </iframe>

[해결 방법]

<script type="text/javascript">
onload = function() {
var frames = document.getElementsByTagName('iframe');   // iframe태그를 하고 있는 모든 객체를 찾는다.
for(var i = 0; i < frames.length; i++)  {
frames[i].setAttribute("allowTransparency","true");  // allowTransparency 속성을 true로 만든다.
        }
}
</script>
반응형