button 누르면 iframe 으로 전송하기
본문
아래와 같이 버튼을 누르면 iframe 에서 페이지가 열리게 하려고 합니다.
버튼을 누르면 2개 iframe 에서 모두 작동하는 문제가 있네요.
무엇이 잘못된걸까요?
<button type="button" class="btn hz-btn-icon sleep" onclick="postYourAdd1">네이버</button>
<button type="button" class="btn hz-btn-icon screenon" onclick="postYourAdd2">다음</button>
<iframe id="forPostyouradd1" data-src="https://naver.com"
src="about:blank" width="200" height="100" style="background-color:coral">
</iframe>
<iframe id="forPostyouradd2" data-src="https://daum.net"
src="about:blank" width="200" height="100" style="background-color:aqua">
</iframe>
<script>
function postYourAdd1() {
var iframe = $("#forPostyouradd1");
iframe.attr("src", iframe.data("src"));
}
$("button").on("click", postYourAdd1);
</script>
<script>
function postYourAdd2() {
var iframe = $("#forPostyouradd2");
iframe.attr("src", iframe.data("src"));
}
$("button").on("click", postYourAdd2);
</script>
답변 3
button 의 onclick 을 삭제하고
script 에서 button 을 구분해서 이벤트 핸들러를 등록하는 방법입니다.
<button type="button" class="btn hz-btn-icon sleep">네이버</button>
<button type="button" class="btn hz-btn-icon screenon">다음</button>
<iframe id="forPostyouradd1" data-src="https://naver.com"
src="about:blank" width="200" height="100" style="background-color:coral">
</iframe>
<iframe id="forPostyouradd2" data-src="https://daum.net"
src="about:blank" width="200" height="100" style="background-color:aqua">
</iframe>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function postYourAdd1() {
var iframe = $("#forPostyouradd1");
iframe.attr("src", iframe.data("src"));
}
$("button.sleep").on("click", postYourAdd1);
</script>
<script>
function postYourAdd2() {
var iframe = $("#forPostyouradd2");
iframe.attr("src", iframe.data("src"));
}
$("button.screenon").on("click", postYourAdd2);
</script>
덕분에 문제를 해결하고 https://sir.kr/g5_tip/21677 에 정리해서 글을 게시했습니다.
$("button").on("click", postYourAdd1);
은 모든 버튼 태그에 해당됩니다.
ID 를 지정하여 ID 셀렉터를 사용하는 것이 적절해 보입니다.
<button id="btn1" ~
$("#btn1").on("click", postYourAdd1);
덕분에 문제를 해결하고 https://sir.kr/g5_tip/21677 에 정리해서 글을 게시했습니다.
onclick 이벤트가 중복 등록 되어있습니다.
<button type="button" id="bntPostYourAdd1" onclick="postYourAdd1()">
→
<button type="button" id="bntPostYourAdd1">
감사합니다. ^^
질문에 오류가 있어서 다시 정리해서 올리겠습니다. ㅠㅠ
