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

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

샘플 : 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개

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

그래서 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]

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

감사 합니다.

게시글 목록

번호 제목
17316
17315
17313
17312
17305
17304
17298
17294
17291
17285
17284
17279
17272
17271
17270
17262
17255
17248
17241
17238
17236
17220
17217
JavaScript 회원가입 2
17216
17214
17207
17205
17203
17201
17198