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

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

· 1년 전 · 1320 · 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년 전

감사 합니다.

게시글 목록

번호 제목
18200
18195
18193
18181
18179
18173
18170
18164
18158
18155
18152
18151
18150
18140
18139
18138
18131
18130
18120
18119
18118
18117
18116
18111
18110
18108
18107
18106
18100
18090