button 누르면 iframe 으로 전송하기

button 누르면 iframe 으로 전송하기

QA

button 누르면 iframe 으로 전송하기

답변 3

본문

아래와 같이 버튼을 누르면  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>

 $("button").on("click", postYourAdd1);

은 모든 버튼 태그에 해당됩니다.

ID 를 지정하여 ID 셀렉터를 사용하는 것이 적절해 보입니다.

<button id="btn1" ~

$("#btn1").on("click", postYourAdd1);

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 154
© SIRSOFT
현재 페이지 제일 처음으로