반응형
iframe 선언시 부터 주소 즉, src를 세팅하면 처음부터 해당 화면이 보이지만 이 주소를 바꾸고 싶은 경우가 있습니다.
jQuery를 이용하여 iframe 의 주소를 바꾸거나 확인하는 기능에 대해 알아보겠습니다.
Attr
Atrr은 attribute의 약자로 jquery에서는 html의 속성에 관여하게 됩니다.
iframe에서 주소 역할을 하는 부분은 src이므로 attr을 이용하여 src속성을 변경할 수 있습니다.
$('#ID').attr('속성', '값')형태는 위와 같습니다.
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
function IfmChange(){
$('#Ifrm').attr('src', '/Test3.jsp')
}
function IfmGet(){
alert($('#Ifrm').attr('src'));
}
</script>
</head>
<body>
iFrame 테스트<br>
<input type="button" onclick="IfmChange()" value="주소변경하기"></button>
<input type="button" onclick="IfmGet()" value="주소가져오기"></button>
<br>
<!-- 프레임 -->
<div style="padding-top: 0px;">
<iframe name="Ifrm" id="Ifrm" style="width: 50%; height: 50%" src="/Test2.jsp"></iframe>
</div>
</body>
위와 같이 예제 소스를 하나 구현해 보았습니다.
처음 실행하면 위와 같은 페이지가 열립니다.
주소변경하기 버튼을 누르면 설정된 주소로 변경됩니다.
마지막으로 주소를 가져오면 현재 설정된 iframe의 주소를 가져오게 됩니다.
위와 같이 jquery 를 이용하면 손쉽게 iframe의 src, 주소를 컨트롤 할 수 있습니다.
반응형
'Dev > jQeury' 카테고리의 다른 글
| [jQuery] Div 숨기기 보이기 CSS 컨트롤 (0) | 2023.01.30 |
|---|---|
| [jQuery] Name, Class, ID 값 가져오기 (0) | 2022.11.11 |
| jQeury란? 이론과 특징, 사용법 (0) | 2019.12.24 |