"javascript, jQuery"에 해당되는 글 - 18건
Post
<body>
<iframe id=“iframeA” src=“test.html”></iframe>
</body>
// iframe 접근
window.frames.length; // 1
window.frames[0].document; // iframe의 window의 document객체
document.getElementById('iframeA'); // iframe 엘리먼트
document.getElementById('iframeA').contentWindow.document; // iframe의 window의 document객체
// iframe객체의 window
$('iframe').get(0).contentWindow // window
// iframe객체의 document
$('iframe').get(0).contentDocument // document
// 또는
$('iframe').get(0).contentWindow.document // document
// 부모html에서 자식iframe 함수 실행
$('#iframe').get(0).contentWindow.함수명;
$('#iframe')[0].contentWindow.함수명;
// 부모html에서 자식iframe 변수접근
$('#iframe').get(0).contentWindow.변수명;
// 부모html에서 자식iframe 접근, 제어 // jQuery
$('#iframe').contents().find('#foo').text('안녕하세요');
// 자식iframe에서 부모 html 변수, 함수 호출
window.parent.변수명; // 한단계 부모 // 그렇다면 두단계 부모는?? window.parent.parent.변수명
window.top.변수명; // 최상위 부모 // html(최상위) -> iframe -> iframe - iframe(자식) (여기에서 top을 쓰면 최상위 부모로 접근, parent를 쓰면 바로위 iframe에 접근)
// iframe 이전페이지로
$('iframe').get(0).contentWindow.history.go(-1);
// iframe 새로고침
$('iframe').get(0).contentDocument.location.reload();
// iframe 로드
$('iframe').load(function(){ // iframe이 모두 load된후 제어
$(this).contents().find('body');
});
// 자식iframe에서 부모html의 다른 iframe에 접근
$('제어할 아이디', parent.frames["부모창 제어할 frame의 name값"].document).html("여기도 제어한다.");
// 자식iframe에서 부모html 접근 (최상위 부모html에 접근된다.)
$('부모창 제어할 아이디', parent.document).contents().find('body').html(); // $('부모창 제어할 아이디', parent.document) -> $('#ID이름',top.document)로 변경해도 된다.
// 팝업창에서는??? opener
$("#id",opener.document).css("display","none");
// 현재창이 iframe인지 여부 확인
// self는 iframe
// top은 self를 포함하는 부모페이지(최상위)
console.log(self == top)
// html -> iframe -> iframe -> iframe 이런 구조일 경우
// 자식iframe 한단계 윗 부모html(iframe)에 접근하기
window.frameElement // iframe 또는 this.frameElement
.parentNode // 부모
<div>
<iframe src="sub.html"></iframe>
</div>
window.frameElement.parentNode // 자식iframe을 감싸는 부모는 div가 된다.
if(!window.frameElement){ console.log('최상위 프레임'); } // 요소(node)가 iframe이 아닐경우에는 최상위(root)부모 html 이다.
// 부모에서 -> 자식 iframe body에 걸려있는 이벤트 trigger("이벤트명", "전달객체")
$('#iframe2')[0].contentWindow.$('body').trigger('eventEvnt', {"a": "홍길동"});
document.getElementById('iframe2').contentWindow.$('body').trigger('eventEvnt', {"a": "홍길동"});
// 자식에서 -> 부모 iframe body에 걸려있는 이벤트 trigger("이벤트명", "전달객체")
// this.$('div') // 이런개념 this(window)는 생략 가능하므로.. 다른 iframe에선 명시적으로 (top, parent)앞에 붙여준다.
top.$('body').trigger('eventname', {"a" : "홍길동"}); // 최상위 iframe 접근 (root개념)
parent.$('body').trigger('eventname', {"a" : "홍길동"}); // 한단계 위 부모 iframe 접근
parent.parent.$('body').trigger('eventname', {"a" : "홍길동"}); // 두단계 위 부모 iframe 접근
// 부모에 jQuery 가 로딩되어 있다면 굳이 다시 로딩 할 거 없이 이렇게
(function($, f) {
$(function() {
$(f).closest('form').find('[name=image]').val("test");
});
})(parent.jQuery, window.frameElement);
// 속성줄때
.appendTo($('#ID이름', parent.document)) // 이렇게하면 ID를 못찾는다
.appendTo($(top.document).find("# ID이름")); // 이런식으로 속성주면 된다
윈도우객체, iframe 참고 : http://ohgyun.com/531
출처 : http://mylife365.tistory.com/10
'javascript, jQuery' 카테고리의 다른 글
| 자바스크립트 지역셀렉트 선택 (0) | 2018.05.14 |
|---|---|
| 일주일동안 팝업 보지않기 (0) | 2018.04.10 |
| 자바스크립트 즐겨찾기 (0) | 2018.03.21 |
| 레이어 팝업시 스크롤 터치스크롤 막기 (0) | 2018.03.21 |
| 가장 많이 쓰이는 벨리데이션 (0) | 2018.03.21 |
Post
브라우저 지원사항
- IE 모든 브라우저 지원
- Chrome 단축키 알림을 띄움
- Opera 단축키 알림을 띄움
- Firefox 지원
- Safari 테스트 못해봄
$(document).ready(function(){
$(셀렉트).on('click', function(e) {
var bookmarkURL = window.location.href;
var bookmarkTitle = document.title;
var triggerDefault = false;
if (window.sidebar && window.sidebar.addPanel) {
// Firefox version < 23
window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
} else if ((window.sidebar && (navigator.userAgent.toLowerCase().indexOf('firefox') < -1)) || (window.opera && window.print)) {
// Firefox version >= 23 and Opera Hotlist
var $this = $(this);
$this.attr('href', bookmarkURL);
$this.attr('title', bookmarkTitle);
$this.attr('rel', 'sidebar');
$this.off(e);
triggerDefault = true;
} else if (window.external && ('AddFavorite' in window.external)) {
// IE Favorite
window.external.AddFavorite(bookmarkURL, bookmarkTitle);
} else {
// WebKit - Safari/Chrome
alert((navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Cmd' : 'Ctrl') + '+D 를 이용해 이 페이지를 즐겨찾기에 추가할 수 있습니다.');
}
return triggerDefault;
});
});
'javascript, jQuery' 카테고리의 다른 글
| 일주일동안 팝업 보지않기 (0) | 2018.04.10 |
|---|---|
| iframe 접근방법 (0) | 2018.03.23 |
| 레이어 팝업시 스크롤 터치스크롤 막기 (0) | 2018.03.21 |
| 가장 많이 쓰이는 벨리데이션 (0) | 2018.03.21 |
| 모바일기기 인식 스크립트 (0) | 2018.03.21 |
Post
$('셀렉트').on('click',function(e){
e.preventDefault();
$(팝업창).fadeIn();
$("body").bind('touchmove', function(e){e.preventDefault()});
});
$('셀렉트').on('click',function(e){
e.preventDefault();
$(팝업창).fadeOut();
$("body").unbind('touchmove');
});
방법 2번 사용방법
$('셀렉트').on('click',function(e){
e.preventDefault();
$(팝업창).fadeIn();
$('html, body').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
});
방법 2번 해제방법
$('셀렉트').on('click',function(e){
e.preventDefault();
$(팝업창).fadeOut();
$('html,body').off('scroll touchmove mousewheel');
});
'javascript, jQuery' 카테고리의 다른 글
| iframe 접근방법 (0) | 2018.03.23 |
|---|---|
| 자바스크립트 즐겨찾기 (0) | 2018.03.21 |
| 가장 많이 쓰이는 벨리데이션 (0) | 2018.03.21 |
| 모바일기기 인식 스크립트 (0) | 2018.03.21 |
| 콤마 추가 및 제거 (0) | 2018.03.21 |
Post
var regEn = /^[a-zA-Z]+$/;
★ 한글 영문만 가능
var regName = /^[가-힣a-zA-Z]+$/;
★ 숫자,알파벳만 가능
var regId = /^[a-zA-Z0-9]+$/;
★ 숫자 영문 특수문자만 가능
var regPw = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{5,12}/;
★ 이메일
var regEmail = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
★ 전화번호
var regTel = /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/;
★ 도메인 형태, http:// https:// 포함안해도 되고 해도 되고
var regDomain = /^(((http(s?))\:\/\/)?)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/;
★ 도메인 형태, http:// https:// 꼭 포함
var regDomain2 = /^((http(s?))\:\/\/)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/;
사용법
변수명.test($(셀렉트).val());
'javascript, jQuery' 카테고리의 다른 글
| 자바스크립트 즐겨찾기 (0) | 2018.03.21 |
|---|---|
| 레이어 팝업시 스크롤 터치스크롤 막기 (0) | 2018.03.21 |
| 모바일기기 인식 스크립트 (0) | 2018.03.21 |
| 콤마 추가 및 제거 (0) | 2018.03.21 |
| 웹접근성 gnb메뉴 (0) | 2018.03.21 |
Post
UserAgent를 통한 모바일 인식 자바스크립트 - 모바일 테블릿 pc 인식
if(navigator.userAgent.match(/Mobile|iP(hone|od)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){
//스마트폰일 때 실행 될 스크립트
}
User agent에는 사용자 기기에대한 정보도 들어있기 때문에, 모바일환경을 인식할 수 있습니다.
위의 코드를 사용하면 태블릿을 제외한 스마트폰에서만 스크립트를 실행할 수 있습니다.
if(navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){
//모바일(스마트폰+태블릿)일 때 실행 될 스크립트
}
이 코드는 안드로이드 태블릿과 아이패드 정보가 추가된 스크립트입니다.
만일 모바일을 제외한 PC에서만 실행할 스크립트는 다음처럼 작성하면 됩니다.
if(!navigator.userAgent.match(/Mobile|iP(hone|od)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){
//태블릿,PC에서만 실행 될 스크립트
}
if(!navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){
//PC에서만 실행 될 스크립트
}
'javascript, jQuery' 카테고리의 다른 글
| 레이어 팝업시 스크롤 터치스크롤 막기 (0) | 2018.03.21 |
|---|---|
| 가장 많이 쓰이는 벨리데이션 (0) | 2018.03.21 |
| 콤마 추가 및 제거 (0) | 2018.03.21 |
| 웹접근성 gnb메뉴 (0) | 2018.03.21 |
| 버튼을 이용하여 최상단으로 이동 (0) | 2018.03.21 |
Post
숫자만 입력하는 폼에 자동으로 콤마를 적용 시켜주는 함수
(숫자 외 입력 안됨)
<script>
/* 콤마 추가 */
function comma(str) {
str = String(str);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
/* 콤마 제거 */
function uncomma(str) {
str = String(str);
return str.replace(/[^\d]+/g, '');
}
/* input 콤마 바로 적용 */
function inputNumberFormat(obj) {
obj.value = comma(uncomma(obj.value));
}
</script>
사용법 onkeyup="inputNumberFormat(this)"
'javascript, jQuery' 카테고리의 다른 글
| 레이어 팝업시 스크롤 터치스크롤 막기 (0) | 2018.03.21 |
|---|---|
| 가장 많이 쓰이는 벨리데이션 (0) | 2018.03.21 |
| 모바일기기 인식 스크립트 (0) | 2018.03.21 |
| 웹접근성 gnb메뉴 (0) | 2018.03.21 |
| 버튼을 이용하여 최상단으로 이동 (0) | 2018.03.21 |
Post
키보드 tap키로도 하위 뎁스영역까지 포커스가 되어야 웹접근성에 어긋나지 않는다.
/* gnb */
$(function(){
var gnb = $('.gnb'); // nav태그 클래스값입력
gnb.find('>ul>li>a')
.on('mouseenter',function(e){
e.preventDefault();
gnb
.find('>ul>li>.gnb_list2:visible') // 2뎁스 클래스명
.hide()
.parent('li')
.removeClass('on'); // css에서 on이라는 클래스값을 입력
$(this)
.next('.gnb_list2:hidden') // 2뎁스 클래스명
.show()
.parent('li')
.addClass('on');
})
.focus(function(){
$(this).mouseover();
})
.end()
.mouseleave(function(){
gnb
.find('>ul>li>.gnb_list2') // 2뎁스 클래스명
.hide()
.prev('a')
.parent()
.siblings()
.removeClass('on');
})
.find('li').last().find('.snb-tit2').focusout(function(){ // 마지막 gnb 2차메뉴에서 마우스를 벗어나을때 사라진다.
$(this).mouseleave();
});
});
'javascript, jQuery' 카테고리의 다른 글
| 레이어 팝업시 스크롤 터치스크롤 막기 (0) | 2018.03.21 |
|---|---|
| 가장 많이 쓰이는 벨리데이션 (0) | 2018.03.21 |
| 모바일기기 인식 스크립트 (0) | 2018.03.21 |
| 콤마 추가 및 제거 (0) | 2018.03.21 |
| 버튼을 이용하여 최상단으로 이동 (0) | 2018.03.21 |
Post
scrollTop 기능
- 해당태그 클릭시 부모요소를 브라우저 top:0으로 이동
$(function() {
$("셀렉트").on("click",function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this).patent().offset().top}, 500);
});
});
'javascript, jQuery' 카테고리의 다른 글
| 레이어 팝업시 스크롤 터치스크롤 막기 (0) | 2018.03.21 |
|---|---|
| 가장 많이 쓰이는 벨리데이션 (0) | 2018.03.21 |
| 모바일기기 인식 스크립트 (0) | 2018.03.21 |
| 콤마 추가 및 제거 (0) | 2018.03.21 |
| 웹접근성 gnb메뉴 (0) | 2018.03.21 |