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 을 구분해서 이벤트 핸들러를 등록하는 방법입니다.
</p>
<p><button type="button" class="btn hz-btn-icon sleep">네이버</button>
<button type="button" class="btn hz-btn-icon screenon">다음</button></p>
<p> </p>
<p><iframe id="forPostyouradd1" data-src="<a href="https://naver.com" " target="_blank" rel="noopener noreferrer">https://naver.com" </a>
src="about:blank" width="200" height="100" style="background-color:coral">
</iframe>
<iframe id="forPostyouradd2" data-src="<a href="https://daum.net" " target="_blank" rel="noopener noreferrer">https://daum.net" </a>
src="about:blank" width="200" height="100" style="background-color:aqua">
</iframe></p>
<p>
<script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
<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></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
$("button").on("click", postYourAdd1);
은 모든 버튼 태그에 해당됩니다.
ID 를 지정하여 ID 셀렉터를 사용하는 것이 적절해 보입니다.
<button id="btn1" ~
$("#btn1").on("click", postYourAdd1);
답변에 대한 댓글 3개
<button type="button" id="bntPostYourAdd1" onclick="postYourAdd1()">
→
<button type="button" id="bntPostYourAdd1">
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인