반응형
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>
반응형
'개발 > javascript' 카테고리의 다른 글
레이어 팝업, 모달 창이 중앙에서 출력하는 방법 (0) | 2023.05.09 |
---|---|
js 카운트 다운 및 남은 시간 표시 방법 (setInterval 사용) (0) | 2023.01.12 |