아래처럼 쪽지창을 레이어로 보이고 숨기도록 해놨고, iframe 높이가 자동으로 적용되도록
스크립트를 추가했습니다.
크롬, 사파리에서는 아무 문제없이 잘 되는데 IE(익스플로러)에서는 iframe이 안보입니다.
왜 그러는지 아시는 분 조언좀 부탁드립니다.
<iframe>에서 onLoad="frameResize(this)"를 삭제하면 내용은 보입니다.
<script language="javascript">
function my_layer(num) {
if($('#my'+num).is(":hidden")) {
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).hide();
$('#my'+num).show();
} else {
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).hide();
}
}
function frameResize(arg) {
arg.height = 0;
arg.height = eval(arg.name+".document.body.scrollHeight");
}
</script>
<a href="javascript:" onClick="my_layer(1);">쪽지</a>
<!-- 레이어 시작 -->
<div style="position:relative; z-index:20;">
<div id="my1" style="position:absolute; display:none;">
<table width="320" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="320" align="center" valign="top">
<iframe src="<?=$g4[path]?>/member/memo_layer.php" width="320" name="ifrm1" frameborder="no" scrolling="no" onLoad="frameResize(this)"></iframe>
</td>
</tr>
</table>
</div>
</div>
스크립트를 추가했습니다.
크롬, 사파리에서는 아무 문제없이 잘 되는데 IE(익스플로러)에서는 iframe이 안보입니다.
왜 그러는지 아시는 분 조언좀 부탁드립니다.
<iframe>에서 onLoad="frameResize(this)"를 삭제하면 내용은 보입니다.
<script language="javascript">
function my_layer(num) {
if($('#my'+num).is(":hidden")) {
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).hide();
$('#my'+num).show();
} else {
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).hide();
}
}
function frameResize(arg) {
arg.height = 0;
arg.height = eval(arg.name+".document.body.scrollHeight");
}
</script>
<a href="javascript:" onClick="my_layer(1);">쪽지</a>
<!-- 레이어 시작 -->
<div style="position:relative; z-index:20;">
<div id="my1" style="position:absolute; display:none;">
<table width="320" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="320" align="center" valign="top">
<iframe src="<?=$g4[path]?>/member/memo_layer.php" width="320" name="ifrm1" frameborder="no" scrolling="no" onLoad="frameResize(this)"></iframe>
</td>
</tr>
</table>
</div>
</div>
댓글 9개
우선
arg.height = eval(arg.name+".document.body.scrollHeight");
이 문장은 아래로 바꾸시는게 좋을거구요.. 제 경우는 여기서도 에러가 있었거든요.
arg.style.height = arg.contentWindow.document.body.scrollHeight;
그리고 저도 잘 이해는 가지않지만
<a href="javascript:" onClick="my_layer(1);">쪽지</a>
여기서 온클릭에서 에러가.. 메서드를 지원 않는다니 좀 당황스럽네요;
여튼
<a href="javascript:my_layer(1);">쪽지</a>
이렇게 직접 href에 넣으니 동작하긴 합니다.
그리고 또 묘하게 my1의 display가 none인 상태로 시작하니 클릭해도 토글이 안되네요;
어쩌면 화면에 보여지지 않는 상태라서 scrollHeight값이 안들어갔을지도..라고 생각해보는중입니다. ㅎ;
그래서 일단 my1에서 display:none;은 빼고 스크립트 상단에 초기화 넣어줬습니다.
$(document).ready(function(){
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).hide();
})
여기까지 하니 일단 작동은 되는군요.. 제 버전은 IE8입니다.
arg.height = eval(arg.name+".document.body.scrollHeight");
이 문장은 아래로 바꾸시는게 좋을거구요.. 제 경우는 여기서도 에러가 있었거든요.
arg.style.height = arg.contentWindow.document.body.scrollHeight;
그리고 저도 잘 이해는 가지않지만
<a href="javascript:" onClick="my_layer(1);">쪽지</a>
여기서 온클릭에서 에러가.. 메서드를 지원 않는다니 좀 당황스럽네요;
여튼
<a href="javascript:my_layer(1);">쪽지</a>
이렇게 직접 href에 넣으니 동작하긴 합니다.
그리고 또 묘하게 my1의 display가 none인 상태로 시작하니 클릭해도 토글이 안되네요;
어쩌면 화면에 보여지지 않는 상태라서 scrollHeight값이 안들어갔을지도..라고 생각해보는중입니다. ㅎ;
그래서 일단 my1에서 display:none;은 빼고 스크립트 상단에 초기화 넣어줬습니다.
$(document).ready(function(){
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).hide();
})
여기까지 하니 일단 작동은 되는군요.. 제 버전은 IE8입니다.
여기저기 검색으로 이렇게 저렇게 바꿔가며 시도중이다보니 확인이 늦었습니다. 죄송합니다.
먼지손님 말씀대로 적용해 보니 바로 해결됐습니다. 정말 감사합니다.
지적해주신 것 처럼 my1의 display가 none인 상태로 시작한 사항이 문제였던거 같습니다.
알려주신 것처럼 스크립트 상단에 초기화 넣어주고 display:none을 빼니 정상 작동됩니다. 감사합니다.
덕분에 또 하나 소중히 배워갑니다.
직접 실행해보시고 문제점 찾아주신 점 넘 감사합니다.
먼지손님 균이님 즐겁고 행복한 연말 보내세요. ^^;
먼지손님 말씀대로 적용해 보니 바로 해결됐습니다. 정말 감사합니다.
지적해주신 것 처럼 my1의 display가 none인 상태로 시작한 사항이 문제였던거 같습니다.
알려주신 것처럼 스크립트 상단에 초기화 넣어주고 display:none을 빼니 정상 작동됩니다. 감사합니다.
덕분에 또 하나 소중히 배워갑니다.
직접 실행해보시고 문제점 찾아주신 점 넘 감사합니다.
먼지손님 균이님 즐겁고 행복한 연말 보내세요. ^^;
덕분에 한가지는 해결했습니다. ^^ 산넘어 산이네요.
일단 display:none 을 빼니 리플레쉬 시 레이어가 나타났다 사라지는게 보기에 거슬려서 계속 방법을 찾다가
<script language="javascript">
<!--
function my_layer(num) {
f_Layer = document.getElementById('my'+num).style;
if(f_Layer.visibility == "hidden") {
$('a').filter( function () { return /class_[0-9]*/.test(this.id); }).removeClass("login_ly");
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).css("visibility", "hidden");
$('#class_'+num).addClass("login_ly");
f_Layer.visibility = "visible";
} else {
$('a').filter( function () { return /class_[0-9]*/.test(this.id); }).removeClass("login_ly");
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).css("visibility", "hidden");
}
}
//-->
</script>
<div id="my1" style="position:absolute; visibility:hidden;">
이런식으로 visibility:hidden 을 써서 보안했습니다.,
스크립트가 지져분해졌네요 ^^
아 이젠 또 새로운 문제점 해결할 시간이네요 ㅎㅎ
감사합니다. 메일 크리스마스 하세요.
일단 display:none 을 빼니 리플레쉬 시 레이어가 나타났다 사라지는게 보기에 거슬려서 계속 방법을 찾다가
<script language="javascript">
<!--
function my_layer(num) {
f_Layer = document.getElementById('my'+num).style;
if(f_Layer.visibility == "hidden") {
$('a').filter( function () { return /class_[0-9]*/.test(this.id); }).removeClass("login_ly");
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).css("visibility", "hidden");
$('#class_'+num).addClass("login_ly");
f_Layer.visibility = "visible";
} else {
$('a').filter( function () { return /class_[0-9]*/.test(this.id); }).removeClass("login_ly");
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).css("visibility", "hidden");
}
}
//-->
</script>
<div id="my1" style="position:absolute; visibility:hidden;">
이런식으로 visibility:hidden 을 써서 보안했습니다.,
스크립트가 지져분해졌네요 ^^
아 이젠 또 새로운 문제점 해결할 시간이네요 ㅎㅎ
감사합니다. 메일 크리스마스 하세요.
아.. 그게 보였다가 사라지나요? 로컬에서 테스트하다보니 로딩이 빨라서 못봤나보네요.
my_layer()에서 처리하시는 것보다는 마찬가지로 초기화할때 같이 해주면 어떨까요?
div에서는 하신대로 visibility:hidden; 주시고
$(document).ready(function(){
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).hide();
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).css("visibility","visible");
})
이렇게하고 my_layer()는 기존꺼에다가 login_ly 부분만 추가하시면 될듯한데요..
visibility는 display하고 다르게 자리를 차지해서 jquery의 hide() show()를 쓰시는게 더 나을듯해서요.
my_layer()에서 처리하시는 것보다는 마찬가지로 초기화할때 같이 해주면 어떨까요?
div에서는 하신대로 visibility:hidden; 주시고
$(document).ready(function(){
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).hide();
$('div').filter( function () { return /my[0-9]*/.test(this.id); }).css("visibility","visible");
})
이렇게하고 my_layer()는 기존꺼에다가 login_ly 부분만 추가하시면 될듯한데요..
visibility는 display하고 다르게 자리를 차지해서 jquery의 hide() show()를 쓰시는게 더 나을듯해서요.
게시글 목록
| 번호 | 제목 |
|---|---|
| 284255 | |
| 284248 | |
| 284247 | |
| 284246 | |
| 284242 | |
| 284238 | |
| 284234 | |
| 284233 | |
| 284229 | |
| 284224 | |
| 284222 | |
| 284215 | |
| 284213 | |
| 284212 | |
| 284209 | |
| 284208 | |
| 284201 | |
| 284193 | |
| 284192 | |
| 284174 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기