2개 이상의 button 누르면 각 ifrme 으로 페이지 열기 > 기술자료 | 해피정닷컴

2개 이상의 button 누르면 각 ifrme 으로 페이지 열기 > 기술자료

본문 바로가기

사이트 내 전체검색

2개 이상의 button 누르면 각 ifrme 으로 페이지 열기 > 기술자료

JavaScript 2개 이상의 button 누르면 각 ifrme 으로 페이지 열기

페이지 정보


본문

버튼 2개에 각각 iframe 으로 url 을 전송해서 페이지를 여는 방법입니다.
 
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<button type="button" id="bntPostYourAdd1">다음</button>
<button type="button" id="bntPostYourAdd2">카카오 캘린더</button>
<br><br>
<iframe id="forPostyouradd1" data-src="https://daum.net" 
    src="about:blank" width="500" height="300" style="background-color:coral">
</iframe>
<script>
    function postYourAdd1() {
        var iframe = $("#forPostyouradd1");
        iframe.attr("src", iframe.data("src")); 
    }
    $("#bntPostYourAdd1").on("click", postYourAdd1);
</script>

<iframe id="forPostyouradd2" data-src="https://map.kakao.com" 
    src="about:blank" width="500" height="300" style="background-color:aqua">
</iframe>
<script>
    function postYourAdd2() {
        var iframe = $("#forPostyouradd2");
        iframe.attr("src", iframe.data("src")); 
    }
    $("#bntPostYourAdd2").on("click", postYourAdd2);
</script>

샘플 : http://happyjung.com/demo/javascript/button_iframe.php
 

참고자료
https://inpa.tistory.com/entry/open-iframe-on-button-click-Code
https://sir.kr/qa/525654

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 1 페이지
  • RSS
기술자료 목록
2634
그누보드   71  2024-11-26 21:14 ~ 2024-11-26 21:22  
2633
그누보드   128  2024-11-22 10:52 ~ 2024-11-22 11:03  
2632
호스팅   129  2024-11-19 14:41 ~ 2024-11-19 21:17  
2631
Linux   111  2024-11-18 15:45 ~ 2024-11-18 15:48  
2630
일반   107  2024-11-15 16:45 ~ 2024-11-15 16:46  
2629
Secure   155  2024-11-06 18:48 ~ 2024-11-06 18:50  
2628
영카트   307  2024-10-21 13:44 ~ 2024-10-21 19:42  
2627
전자결제   594  2024-09-05 09:30  
2626
MySQL   964  2024-03-29 14:14 ~ 2024-03-29 14:14  
2625
그누보드   1187  2024-02-23 18:40 ~ 2024-02-24 06:13  
열람
JavaScript   1301  2024-02-16 18:50 ~ 2024-02-16 20:37  
2623
Java   1244  2024-02-06 16:49  
2622
PHP   1417  2024-02-06 16:42  
2621
호스팅   1256  2024-01-29 12:54  
2620
PHP   1314  2024-01-26 11:04 ~ 2024-01-26 11:13  
2619
MySQL   1515  2024-01-08 17:37 ~ 2024-03-14 16:00  
2618
SQL   1626  2024-01-08 12:36  
2617
영카트   1687  2024-01-04 14:57  
2616
일반   2585  2023-12-15 18:33  
2615
Android   2078  2023-11-30 18:48 ~ 2023-11-30 19:41  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.