채택완료

iframe src 질문입니다.

2016-09-29 (목) 12:39:42 4,265

현재 iframe src를 url 주소가 아닌 이미지를 삽입한 상태인데

이미지가 iframe에서 설정한 width, height가 맞지 않아서 그냥 중앙으로 조금 옮기고 싶은데

css를 어떻게 설정을 해야할지 모르겠네요...

iframe src {} 이런식으로 해도 안되고..

iframe img{} 이런식으로도 되지가 않네요 ...

그래서 임시방편으로 스크립트상에 

$(document).ready(function(){
        $("iframe 아이디").load(function(){
        $(this).contents().find('img').css('position', 'relative');
        $(this).contents().find('img').css('left', ' 260px');
      });
    });

이렇게 하니 기존 src의 이미지가 변경이 되길래 해결이 되었나 보다 하고 있었는데

iframe을 target으로 하는 모든 페이지의 img가 다 css가 먹히는 현상이 나오네요...

iframe상에 src로 설정한 이미지만 저렇게 css를 적용할 수 있는 방법이 있을까요? 

답변 4개 / 댓글 5개

채택된 답변
+20 포인트
2016-09-29 (목) 14:33:25
Copy
$(document).ready(function(){       var src = $('#iframe_show').attr('src');	$("iframe 아이디").on('load', function(){		$(this).contents().find('img[src*="'+src+'"]').first().css('position', 'relative');		$(this).contents().find('img[src*="'+src+'"]').first().css('left', '260px');	});});


 

답변에 대한 댓글 3개

2016-09-29 (목) 14:36:31
와! 감사합니다 !! find() 함수 부분에 src*="'+src+'" 이게 무엇을 뜻하는지 조금 알수 있을까요~? ㅜ
img태그의 속성중, src가 아이프레임의 src 문자열을 포함하는 것.
2016-09-29 (목) 14:41:56
친절한 답변 감사드립니다^_^ 좋은 하루 되세요~!
2016-09-29 (목) 14:21:49

제이쿼리를 활용해서

아이프레임 크기를

불러오는 페이지에 맞게 자동으로 크기를 조절해주는 스크립트가 있어요~

http://sd1126611.blog.me/220805508877

요고 응용하면 되실듯하네요^^

그리고 아이프레임 목적이 단순 이미지를 바꾸는거라면

아이프레임을 넣지 않고도 자바스크립트로 해당 이미지 url 을 바꿀 수 있습니다.

메인으로나오는곳을 별도의 페이지로 구성하시고

미리 가로 세로를 100% 할당하거나 iframe 사이즈에 맞게 적용해주시면 될것 같습니다.

답변에 대한 댓글 1개

2016-09-29 (목) 14:02:41
페이지 구성안하고는 힘들까요 ?

img에 해당 id를 할당해서 그 아이디만 반영되게 하는것도 좋은 방법인듯 해보이네요

답변에 대한 댓글 1개

2016-09-29 (목) 14:04:06
<iframe id="iframe_show" name="iframe_show" marginheight="0" marginwidth="0"
width="1300" height="900" scrolling=yes src='<?php echo G5_THEME_IMG_URL ?>/4th.png' frameBorder=0 "></iframe>
이렇게 되어있는데 img에 어떻게 id를 주죠??

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