테스트 사이트 - 개발 중인 베타 버전입니다

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

· 1년 전 · 1322 · 3

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

 

버튼 2개에 각각 iframe 으로 url 을 전송해서 페이지를 여는 방법입니다.

QA ( https://sir.kr/qa/525654 )에 질문을 했고

@마르스컴퍼니 님과 @배르만 님의 도움으로 문제를 해결하고 그 내용을 공유합니다.

 

<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>

 

 

참고자료

https://inpa.tistory.com/entry/open-iframe-on-button-click-Code

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

1년 전

와우 수고하셨어요. 그런데 이리 하면 뒤로가기 버튼을 누르면 메인페이지 뒤로가기가 되는 것이 아니라 아이프레임 뒤로가기가 되어서 메인페이지는 아이프레임 페이지의 최초순간까지 뒤로가기가 안 되는 결점이...

그래서 div 의 innerHTML 을 바꾸는 것이 더 효과적일 수 있습니다.

 

아래 코드 한번 참고해 보세요.

 

[code]

<div id="buttonDiv">
    <button type="button" data-src="https://daum.net">다음</button>
    <button type="button" data-src="https://map.kakao.com">카카오 캘린더</button>
</div>
<div id="iframeDiv">
    <div style="background-color:coral;width:500px;height:300px"></div>
    <div style="background-color:aqua;width:500px;height:300px"></div>
</div>
<script>
buttons = document.querySelectorAll("#buttonDiv button"); 
for (i in buttons) {
    buttons[i].dataset.num = i;
    buttons[i].onclick = function() {
        document.querySelectorAll("#iframeDiv div")[this.dataset.num].innerHTML = "<iframe src='" + this.dataset.src + "' style='width:100%;height:100%;border:none'></iframe>";
    }
}
</script>

[/code]

@비타주리 
여윽시 비타주리님입니다요.

1년 전

감사 합니다.

게시글 목록

번호 제목
18088
18080
18078
18070
18061
18037
18036
18033
18022
18021
18020
18018
18004
17999
17995
17987
17982
17981
17980
17970
17965
17964
17963
17962
17960
17956
17953
17949
17930
17928