jQuery의 하위 창과 상위 창의 작동 방법에 대한 간략한 분석

인터넷이 발전하면서 웹페이지에서는 사용자 경험에 점점 더 많은 관심을 기울이고 있으며, 뛰어난 JavaScript 라이브러리인 jQuery는 프런트엔드 개발에 큰 편의성을 제공합니다. 웹 페이지에서는 자식 창과 부모 창 간의 상호 작용이 자주 사용됩니다. jQuery의 자식 창과 부모 창 메서드를 소개하겠습니다.

1. 하위 창 작업

1. 하위 창 열기

우리는 일반적으로 4개의 매개변수, 즉 URL을 전달할 수 있는 window.open()을 사용합니다. 하위 창입니다. 창의 주소는 새 창을 열 때 지정할 수 있는 하위 창의 이름입니다. 기능은 크기와 같은 창의 속성을 지정하는 선택적 문자열 매개변수입니다. 창 위치, 도구 모음 유무 등 교체는 기록에 URL 추가에 있는지 여부를 지정합니다.

샘플 코드:

window.open(URL,name,features,replace);

2. 자식 창 닫기

자식 창에서는 window.close() 메서드를 사용하여 현재 창을 닫을 수 있습니다.

샘플 코드:

window.open("child.html","childWindow","height=200,width=200");

3. 자식 창에서 부모 창 메서드를 호출합니다.

자식 창에서는 window.opener를 통해 부모 창의 개체를 가져오고 해당 메서드를 호출할 수 있습니다.

샘플 코드:

부모 창:

<button onclick="window.close()">关闭当前窗口</button>

자식 창:

function showMessage(message){
    alert(message);
}

2. 부모 창 작업

1.자식 창 개체 가져오기

부모 창에서 window.open( ) 메서드 Window 객체를 사용하여 열린 하위 창 객체를 얻습니다.

샘플 코드:

window.opener.showMessage("Hello,world!");

2. 상위 창에서 하위 창 메소드 호출

상위 창에서는 열려 있는 하위 창의 메소드를 호출할 수 있습니다.

샘플 코드:

부모 창:

var childWindow = window.open("child.html","childWindow","height=200,width=200");

자식 창:

function changeColor(color){
    childWindow.document.body.style.backgroundColor = color;
}

3. 부모 창에서 자식 창 데이터 가져오기

부모 창에서는 다음의 창 개체를 통해 자식 창의 데이터를 가져올 수 있습니다. 자식 창.

샘플 코드:

부모 창:

<button onclick="window.opener.changeColor(&#39;red&#39;)">变红色</button>

자식 창:

var childWindow = window.open("child.html","childWindow","height=200,width=200");

setTimeout(function(){
    var childData = childWindow.document.getElementById("data").innerHTML;
    alert(childData);
},2000);

요약:

위 소개를 통해 jQuery의 자식 창과 부모 창 메서드는 매우 간단하지만 웹 페이지 중성자를 구현한다는 것을 알 수 있습니다. 창과 상위 창 간의 상호 작용은 사용자 경험에 더 많은 가능성을 제공합니다. 실제 프로젝트에서 하위 창과 상위 창 간의 상호 작용이 필요한 경우 개발자는 위의 방법을 사용하여 이를 달성할 수 있습니다.

위 내용은 jQuery의 하위 창과 상위 창의 작동 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!