iframe src 질문입니다.
본문
현재 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
$(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');
});
});
와! 감사합니다 !! find() 함수 부분에 src*="'+src+'" 이게 무엇을 뜻하는지 조금 알수 있을까요~? ㅜ
img태그의 속성중, src가 아이프레임의 src 문자열을 포함하는 것.
친절한 답변 감사드립니다^_^ 좋은 하루 되세요~!
img에 해당 id를 할당해서 그 아이디만 반영되게 하는것도 좋은 방법인듯 해보이네요
<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를 주죠??
메인으로나오는곳을 별도의 페이지로 구성하시고
미리 가로 세로를 100% 할당하거나 iframe 사이즈에 맞게 적용해주시면 될것 같습니다.
페이지 구성안하고는 힘들까요 ?
제이쿼리를 활용해서
아이프레임 크기를
불러오는 페이지에 맞게 자동으로 크기를 조절해주는 스크립트가 있어요~
http://sd1126611.blog.me/220805508877
요고 응용하면 되실듯하네요^^
그리고 아이프레임 목적이 단순 이미지를 바꾸는거라면
아이프레임을 넣지 않고도 자바스크립트로 해당 이미지 url 을 바꿀 수 있습니다.