아이프레임 질문드립니다.
| CMS/프레임워크 | Rhymix 2.1 |
|---|---|
| 개발 언어 | PHP 7.4 |
페이지를 만들어서 아이프레임 기능으로 링크를 넣었습니다. 폭과 높이를 100% 로 입력했는데요 높이가 100px 정도만 나오고 짤리네요..
높이를 100% 할려면 어떻게 해야 할까요?
세진님의
http://sejin7940.co.kr/xe_tips/21384
을 참고해보았는데요. 외부페이지로 연결해보면 잘됩니다. 그런데 페이지에서 생성하고 아이프레임으로 블러오기를 하면 안되네요
감사합니다.
가이더
Lv. 6
댓글 9
그리고 누누히 말씀드리지만 안된다고만 적으시면 아무도 뭐가 문제인지 모릅니다. 아이프레임이 뜨지 않는건가요? 뜨긴 뜨는데 높이가 안맞나요? 콘텐츠 부분을 채우는게 목표인데 넘치게 채워지나요? 적지 않으시면 알 수 없습니다.
네 감사합니다. 구글링해서 해봐도 안되더라고요. 폭 100%는 적용이 되는데 높이를 100%로 하면 100px 정도로만 나옵니다.
아이프레임 부분 id를 지정
$(function(){
var window_height = $(window).height();
$('#iframe01').css('height', window_height);
});
</script>
위의 Jquery 조작부 소스를 페이지 최 하단 혹은 적절한 위치에 삽입
추가 설명 :
#iframe01 은 id값이 iframe01인 요소를 의미.
이 방법은 Jquery를 이용한 방법이고.. 그 밖에 다른 방법또한 YJSoft 님 의견처럼 많습니다.
<iframe id="iframe01" src="사이트링크">
<script>
$(function(){
var window_height = $(window).height();
$('#iframe01').css('height', window_height);
});
</script>
이렇게 넣어봤는데 제가 먼가 잘못한거 같다는 생각이 듭니다.
위의 소스는 제이
엔지쿼리 를 필요로 합니다.XE 및 라이믹스에는 jquery가 내장되어 있어 jquery문법으로 설명 드린건데... 별도의 페이지라면 jquery를 로드 해주어야 정상 작동 합니다.
페이지의 상단에
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
추가 해주시면 정상 작동 될것이라 생각합니다.
혹은 jquery를 사용하지 않는 순수 자바스크립트 방법을 찾아서 적용하시면 jquery없이도 구현 가능합니다
검색어 : javascript iframe height 100%
<body style="margin: 0px;">
<iframe id="iframe01" style="width:100%; border:0px;" src="https://realpano.net/_vr/230424/tour.html?startscene=0&startactions=lookat(-160.19,18.49,124.58,0,0)"></iframe>
</body>
<script>
$(function(){
var window_height = $(document).innerHeight(); // 현재 페이지의 높이를 가져와서 window_height 변수에 저장
$('#iframe01').css('height', window_height); // id가 iframe01인 요소의 높이를 window_height 변수로 변경
});
</script>
쪽지에는 코드하이라이트 및 첨부파일 기능이 없어 여기에 남깁니다.
다만, 가이더 님께서 어떤 페이지에 아이프레임을 넣느냐에 따라 필요로 하는 높이값 등은 변동될 수 있기 때문에
헤더 메뉴나 다른 요소들이 존재 한다면 그 부분의 높이는 빼주셔야 정상적으로 나올것 입니다.
또한 페이지의 크기가 변동되는 경우에 아이프레임 크기가 고정되어 있을 것이기에..
자동으로 위의 코드가 적용 되도록 위 코드를 함수화 하여 페이지 리사이즈시 해당 함수가 작동 되도록 수정 하셔야 할 것입니다.
해당 페이지에 <iframe> 태그만 있고, 화면에 완전히 꽉차야 한다면
으로도 됩니다.
그게 아니라, 부모 요소에 100% 꽉 차야한다면 CSS로는 어렵고 다른 분이 말씀하신 것처럼 자바스크립트로 제어해야 합니다.