테스트 사이트 - 개발 중인 베타 버전입니다

iframe margin-top 질문 채택완료

jaykjayk5 6년 전 조회 3,446

iframe 에 style에서 margin-top 을 -100 하였는데 iframe 내용 안의 것을 움직이는게 아니고 iframe 전체 창이 위로 올라가더라구요. 전 내용안의 것만을 움직이게 하고 싶은데 어떻게 해야 하죠? ㅠ.ㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
s
6년 전

그런 경우라면 css(스타일)의 영향일겁니다.

즉 아이프레임 내부에서 지정한 스타일과 외부파일 스타일과

이름이 중복되는 스타일명이 있지 않을까 싶네요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

j
jaykjayk5
6년 전
그게 맞는것 같아요. 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

제이쿼리로 아이프레임 내부의 클래스 접근이 가능합니다.

접근이 가능하면 css 수정도 가능하겠죠.

 

예제소스 - test.html

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<iframe class="iframe1" src="test_in.html" width="600" height="300"></iframe>
<input type="button" onclick="$('.iframe1').contents().find('.iframe2').attr('style','margin-top:50px; width:100px; height:100px; background:#cc0000;');" value="바꾸기">

 

예제소스 - test_in.html

<div class="iframe2" style="position: relative; left:0px; top:0px; margin-top:0px; width:200px; height:200px; background: #fff100;">
아이프레임 안
</div>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

j
jaykjayk5
6년 전
감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

붉은바람

iframe은 타 주소 또는 다른 웹페이지를 그대로 가져오는 윈도우창같은 소스입니다.

그래서 내부에 margin이나 padding을 주려면, 해당 웹페이지에 소스를 바꿔야 가능해요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

j
jaykjayk5
6년 전
다른데선 되거든요. 그래서 될 줄 알았어요.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인