jquery를 사용하여 상위 페이지 요소나 데이터를 얻는 여러 방법에 대한 간략한 분석
- PHPz원래의
- 2023-04-17 10:30:302921검색
jQuery는 HTML 문서 탐색 및 이벤트 처리와 같은 많은 작업의 개발을 단순화하기 때문에 일반적으로 사용되는 JavaScript 라이브러리입니다.
어떤 경우에는 JavaScript가 iframe 또는 상위 페이지와 통신해야 하며 그런 다음 상위 페이지의 요소나 데이터를 가져와야 합니다. 상위 페이지 요소나 데이터를 얻는 몇 가지 방법은 다음과 같습니다.
- 부모 개체
부모 페이지는 부모 개체를 사용하여 현재 페이지에 접근할 수 있고, 자식 페이지도 window.parent를 통해 부모 페이지에 접근할 수 있습니다. 상위 페이지의 모든 요소와 속성을 얻으려면 parent를 사용하세요. myIframe이라는 iframe 요소가 포함된 상위 페이지가 있다고 가정하면 하위 페이지는 다음 코드를 사용하여 상위 페이지의 모든 h1 태그를 가져올 수 있습니다.
var h1s = parent.$("h1");
- window.top 개체
top 개체도 사용할 수 있습니다. 상위 페이지에 액세스합니다. 이는 전체 창에 액세스할 수 있는 전체 페이지 계층 구조에 대한 액세스를 제공합니다. top을 사용하여 상위 페이지의 요소 및 속성에 액세스할 수 있습니다.
부모와 비교할 때 top을 사용하는 주요 이점은 도메인 간입니다. 상위 페이지와 하위 페이지의 도메인 이름이 다른 경우 top을 사용하여 도메인 간 보안 제한을 우회하세요.
var h1s = window.top.$("h1");
- postMessage 메소드 사용
postMessage는 HTML5에 도입된 새로운 메소드로, 두 창 간에 메시지를 안전하게 전달하는 데 사용됩니다. postMessage 메소드를 사용하면 하위 페이지가 상위 페이지에 메시지를 보낼 수 있고 상위 페이지는 이러한 메시지를 수신할 수 있습니다.
하위 페이지 코드:
window.parent.postMessage("Hello from iframe!", "*");
상위 페이지에서 필요에 따라 메시지를 듣고 상위 페이지의 요소나 데이터를 가져올 수 있습니다.
window.addEventListener("message", function(event) {
if (event.source != window.parent) return;
// 获取消息的内容
var data = event.data;
// 在父页面中查找h1元素
var h1s = $('h1', event.source.document);
}, false);
- window.opener 속성 사용(팝업 창만 해당)
자식의 경우 페이지가 팝업 창으로 열리고, 열린 상위 창의 개체는 window.opener 속성을 사용하여 액세스할 수 있습니다.
var h1s = window.opener.$("h1");
간단히 말하면, 어떤 방법을 사용하든 상위 페이지 요소나 데이터를 가져오려면 도메인 간 권한이 필요합니다. 도메인 간 기능을 사용할 때는 보안을 구현하고 모범 사례를 따르십시오.
위 내용은 jquery를 사용하여 상위 페이지 요소나 데이터를 얻는 여러 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!