jquery가 프레임을 변경합니다.

프런트엔드 개발이 발전하면서 jQuery는 대다수의 프런트엔드 개발자에게 필수적인 기술이 되었습니다. 그중 jQuery를 통해 프레임을 변경하는 기술이 점점 더 널리 사용되고 있습니다. 이 기사에서는 jQuery를 사용하여 프레임을 변경하는 방법을 소개합니다.

1. 프레임이란 무엇입니까

웹 개발에서 프레임은 프레임이라고도 하며 양식이라고도 합니다. 페이지를 여러 보기로 분할하여 개발자가 동시에 같은 페이지에 여러 개의 독립적인 HTML 문서를 표시할 수 있도록 하는 HTML 기술입니다. 프레임은 두 가지 유형으로 나눌 수 있는데, 하나는 수평 프레임세트이고 다른 하나는 수직 프레임세트입니다. 아래 그림과 같습니다.

2. jQuery가 프레임을 변경하는 방법

jQuery를 통해 프레임을 변경하는 방법에는 두 가지가 있습니다.

1 상위 페이지의 JS를 통해 하위 프레임을 작동합니다

Get 상위 페이지의 JS를 통해 서브프레임의 객체를 만든 다음 서브프레임의 ID나 이름을 사용하여 서브프레임의 모든 내용을 수정하는 작업을 수행합니다. 그 중 서브프레임을 구하는 방법은 다음과 같습니다.

var frameObj = $(frames["frameName"]);

그 중 프레임은 문서에 있는 모든 프레임의 집합을 포함하는 전역 객체입니다. 프레임의 이름이나 ID를 사각형 안에 추가하여 필요한 프레임을 구합니다. 괄호.

그런 다음 FrameObj 개체를 통해 프레임의 내용을 조작합니다. 다음 샘플 코드:

var frameObj = $(frames["frameName"]);
// 更改frame的src为http://www.example.com
frameObj.attr("src", "http://www.example.com");
// 获取frame的内容
console.log(frameObj.contents().find('.className').html());

2. 하위 프레임의 JS를 통해 상위 페이지를 운영합니다.

자식 프레임에서 JS를 사용하여 상위 페이지의 객체를 얻은 후 상위 페이지의 ID 또는 이름을 통해 운영합니다. 페이지. 그 중 상위 페이지를 구하는 방법은 다음과 같습니다.

var parentObj = $(window.parent.document);

그 중 상위 창의 객체는 window.parent를 통해 획득하고, 그 다음 해당 창의 Document 객체는 document를 통해 획득합니다.

그런 다음 parentObj 개체를 통해 상위 페이지의 콘텐츠를 조작합니다. 다음 샘플 코드는 다음과 같습니다.

var parentObj = $(window.parent.document);
// 更改父页面的title
parentObj.find('title').html('新的标题');
// 获取父页面的内容
console.log(parentObj.find('.className').html());

3. jQuery 변경 프레임의 사용 시나리오

1. 페이지에 여러 프레임이 있는 경우 프레임의 내용을 동적으로 수정하여 새로 고침 없이 페이지를 업데이트하는 효과를 얻습니다.
2. 상위 페이지는 상위 페이지의 하위 페이지에 있는 요소의 색상, 크기 등을 변경하는 등 하위 프레임과의 상호 작용을 통해 하위 페이지의 콘텐츠를 제어합니다.
3. 하위 페이지는 양식을 제출하거나 상위 페이지와의 상호 작용을 통해 상위 페이지의 데이터를 획득하여 데이터 전송 및 공유를 실현합니다.

4. 주의 사항

1. 도메인 간 요청으로 인해 기본적으로 프레임은 서로 액세스하고 수정할 수 없습니다. 그러나 프레임의 sandbox 속성과 상위 페이지의 allowed-same-origin 속성을 설정하면 도메인 간 통신이 가능합니다.
2. 프레임은 서로 액세스하고 수정하려면 동일한 도메인 이름, 포트 번호 및 프로토콜을 사용해야 합니다.
3. jQuery에서 프레임에 액세스하려면 먼저 DOM이 로드될 때까지 기다렸다가 window.onload에서 사용해야 합니다.

5. 요약

본 글에서는 jQuery를 통해 프레임을 변경하는 방법을 소개하고 이에 대한 시나리오와 주의사항을 자세히 설명합니다. 이 지식을 철저히 이해하면 프런트엔드 개발을 더 잘 수행하고 더 많은 기능을 구현할 수 있습니다.

위 내용은 jquery가 프레임을 변경합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!