window.open()에서 열린 창간에 데이터 교환
window.open()는 새 창을 여는 메서드이지만 반환 값으로 열린 창에 대한 참조를 반환합니다.또한
window.opener 속성은 현재 창을 연 창에 대한 참조를 반환합니다. 클라이언트측 JavaScript의 전역 변수는 window 객체의 속성이므로 window.open() 에서 열린 창은 서로의 전역 변수를 참조할 수 있게 됩니다.샘플
이 예제에서는 창간에 값이 리액티브하게 공유되는 텍스트 입력을 작성해 보겠습니다.
test1.html
<!DOCTYPE html>
<html>
<head>
<script>
let w1 = window
let w2 = window.open("test2.html")
Object.defineProperty(w1, "inputValue", {
set(v){
console.log("w1.inputValue was set!:" + v)
w2.document.getElementById("input2").value = v
}
});
function func(e){
w1.inputValue = e.target.value
}
</script>
</head>
<body>
input1 :
<input type="text" id="input1" oninput="func(event)">
</body>
</html>
test2.html
<!DOCTYPE html>
<html>
<head>
<script>
let w1 = window.opener
let w2 = window
Object.defineProperty(w2, "inputValue", {
set(v){
console.log("w2.inputValue was set!:" + v)
w1.document.getElementById("input1").value = v
}
});
function func(e){
w2.inputValue = e.target.value
}
</script>
</head>
<body>
input2 :
<input type="text" id="input2" oninput="func(event)">
</body>
</html>
test1.html 를(를) 브라우저에서 열면:
이와 같이, 서로의 글로벌 변수
document 를 참조해 리액티브한 묘화를 실현하고 있습니다.당연한 일이지만, 한쪽으로 다시 쓸 수 있습니다.
test3.html
<!DOCTYPE html>
<html>
<head>
<script>
let w3 = window
let w4 = window.open("test4.html")
Object.defineProperty(w3, "inputValue", {
set(v){
console.log("w3.inputValue was set!:"+v)
w4.document.getElementById("input4").value=v
}
});
Object.defineProperty(w4, "inputValue", {
set(v){
console.log("w4.inputValue was set!:" + v)
w3.document.getElementById("input3").value = v
}
});
function func(e){
w3.inputValue = e.target.value
}
</script>
</head>
<body>
input3 :
<input type="text" id="input3" oninput="func(event)">
</body>
</html>
test4.html
<!DOCTYPE html>
<html>
<head>
<script>
function func(e){
inputValue = e.target.value
}
</script>
</head>
<body>
input4 :
<input type="text" id="input4" oninput="func(event)">
</body>
</html>
소스는 여기에서 : htps : // 기주 b. 코 m / 요 k 등 9 / 레아 c ゔ ぇ - ゔ ぇ r ぃ んど w
참고 링크
Reference
이 문제에 관하여(window.open()에서 열린 창간에 데이터 교환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yokra9/items/4da90ee3adc3b7973651텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
