[javascript] window open 속성 - 팝업창 띄우기 / html 창 띄우기 / 색 변경
by mini_min[javascript] window open 속성 - 팝업창 띄우기 / html 창 띄우기 / 색 변경
✔️ 윈도우 객체로 팝업창 띄우기
👩💻 윈도우 객체 주요 속성이 궁금하면 아래 글로.....
https://backshren20.tistory.com/336
[javascript] 브라우저 객체 모델 / window 객체 / document 객체
[javascript] 브라우저 객체 모델 / window 객체 / document 객체 ✔️ 브라우저 객체 모델 BOM : 브라우저와 상호작용하는 메소드와 인터페이스를 제공한다. : 웹 브라우저와 관련된 객체의 집합이다. : BOM
backshren20.tistory.com
<div>
<!-- openWin()그냥 쓰면 안된다. -->
<p><a href="javascript:openWin()">팝엽열기</a> </p>
<p><a href="javascript:closeWin()">닫기</a> </p>
</div>
<script type="text/javascript">
var win = null;
function openWin() {
let f;
let url = "https://naver.com";
f = "letf=10, top=10, width=700, height=500";
win = window.open(url, "test", f);
//두번쨰는 띄울 메모, f는 팝업창의 위치
//속성을 줬을 때 먹히는 속성, 안먹히는 속성 따로 있을수잇다.
}
function closeWin() {
if(win){
win.close();
}
win = null;
}1) <a href="javascript:openWin()">
a 태그로 javascript:openWin 함수가 열리도록 한다.
2) function openWin() 에서 f 는 팝업창이 뜨는 위치를 말한다. url 은 팝업창이 띄울 주소를 작성한다.
3) win = window.open(url, "test", f);
open 속성은 새로운 브라우저 창을 생성하여 명시된 리소스를 새 창에 로딩한다.
순서대로 url , 윈도우 이름, 위치 정보 이다.
✔️ 윈도우 객체로 html 창 띄우기
👩💻 마찬가지로 opne 속성을 사용한다.
대신, 이때 url 은 html 주소이다.
이때, zipFind.html 형식이 중요하다.
다른 html 에서 open 당했기 때문에, 현재 윈도우를 생성한 창(html) 을 opener 라고 가리킨다.
<script type="text/javascript">
function selectZip(zip, addr){
//opener : 현재 윈도우를 생성한 창! 이 창을 만든 녀석
opener.myForm.zipNo.value = zip;
opener.myForm.addr1.value = addr;
window.close();
}
window.onload = () => {
let s = opener.myForm.name.value + "님의 우편번호를 선택해주세요.";
document.getElementById("zipFind").innerHTML = s;
}
</script>
</head>
<body>
<h3 id="zipFind"> </h3>
<div>
<p><a href="javascript:selectZip('111', '서울')">111-서울</a></p>
<p><a href="javascript:selectZip('222', '인천')">222-인천</a></p>
<p><a href="javascript:selectZip('333', '경기')">333-경기</a></p>
<p><a href="javascript:selectZip('444', '부산')">444-부산</a></p>
<p><a href="javascript:selectZip('555', '제주')">555-제주</a></p>
</div>
</body>
</html>💡 창을 띄우자마자, '@@님의 우편번호를 선택하세요' 란 창이 뜨도록,
window 객체의 onload 속성도 만들었다.
function openFind() {
let f;
let url = "zipFind.html";
//위치
f = "left=30, top=30, width=700, height=500";
window.open(url, "zip", f);
}💡 onclick="openFind();">우편번호 (중략)
우편번호 버튼을 누르면 새로운 창이 뜨도록 설정하면 새로운 html 창이 뜬다.
✔️ 윈도우 객체로 배경색 변경하기
👩💻 배경 변경 버튼을 누르면, 배경 선택 창이 새로 뜨고, 배경을 선택하면 배경색이 변경되도록 한다.
여기서도 color.html 을 호출한 창을 opener 라고 가리켜야한다.
opener 의 layout 클래스의 background 속성을 선택한 값으로 변경한다.
function cb() {
let f;
let url = "color.html";
f = "left=30, top=30, width=700, height=500";
window.open(url, "color", f);
}function change() {
let c = document.getElementById("color").value;
//querySelector 는 document 객체의 메소드라서. opener 는 윈도우 객체라서
opener.document.querySelector(".layout").style.backgroundColor = c;
window.close();
}
'JavaScript' 카테고리의 다른 글
| [javascript] form 관련 이벤트 this / currentTarget / target / srcElement (0) | 2022.09.25 |
|---|---|
| [javascript] 이벤트 EventTarget / 이벤트 등록 제거 방법 (1) | 2022.09.25 |
| [javascript] location 객체 / navigator 객체 (0) | 2022.09.25 |
| [javascript] 클래스(class) 선언 / 상속 / 프라이빗 (2) | 2022.09.25 |
| [javascript] 객체 프로토타입에 프로퍼티, 메소드 추가 / 정적메소드 (0) | 2022.09.22 |
블로그의 정보
개발자 미니민의 개발로그
mini_min