iframe_javascript 기술의 요소를 얻고 작동하는 JS 방법

JS가 iframe에서 객체 요소와 문서를 가져오거나 설정하는 여러 가지 방법

1. IE에만 ​​해당(프레임 인덱스를 통한 이미지 위치 지정):

코드 복사 코드는 다음과 같습니다.

document.frames[i].document.getElementById('요소 ID');

2. IE에만 ​​해당(iframe 이름을 통한 이미지 위치 지정):

코드 복사 코드는 다음과 같습니다.

document.frames['iframe 이름'].document.getElementById('요소 ID');

위 방법은 iframe뿐만 아니라 프레임셋의 프레임에도 적용됩니다. IE는 자체 표준을 설정하는 데 능숙하지만 디자인 중 상당수가 더 인간적이라고 말하고 싶습니다. 예를 들어, 이는 다음과 같은 표준 경로를 지원하는 것 외에도 간결하고 시각적인 작성 방법을 제공합니다.

3. 일반적인 방법:

코드 복사 코드는 다음과 같습니다.

document.getElementById('iframe의 ID').contentWindow.document.getElementById('요소의 ID')

contentWindow를 추가할 때 주의하세요. 프레임과 iframe 내부의 창 개체를 나타내기 때문에 간과되기 쉬우므로 문제가 자주 발생합니다.

JS가 iframe 문서 콘텐츠 가져오기

코드 복사 코드는 다음과 같습니다.

function getIframeContent(){ //iframe에서 문서 콘텐츠 가져오기
var 문서;
if (document.all){ // IE
doc = document.frames["MyIFrame"].document
}else{ // 표준
doc = document.getElementById("MyIFrame").contentDocument
}
doc.body.innerHTML을 반환합니다.

}

참고: 위의 .contentDocument는 .contentWindow.document와 동일합니다!

1. 요구사항과 문제점

Iframe 레이아웃은 상단 메뉴, 왼쪽 탐색, 메인 페이지 등 웹사이트의 배경 관리에 사용됩니다. 요구 사항은 다음과 같습니다. 메인 페이지에서 버튼을 클릭하고 상단 메뉴 표시줄 오른쪽에 "종료" 링크를 표시합니다. 시스템을 종료하려면 클릭하세요.

내 생각은: 상단 메뉴 페이지에 보이지 않는 "종료" 링크를 넣는 것입니다. 사용자가 iframe에 있는 메인 페이지(mainPage.htm)에서 버튼을 클릭하면 해당 링크가 오른쪽에 표시됩니다. 상단 메뉴 페이지.

지금 직면한 문제는 페이지의 iframe 하위 페이지(mainPage.htm)에 있는 다른 iframe 하위 페이지(예: topPage.htm)의 HTML 요소를 어떻게 얻고 작동합니까?입니다.

2. JS를 통해 iframe의 요소를 획득하고 조작하여 문제 해결

여기서의 주요 목적은 JS를 통해 Window 객체를 조작하는 것입니다. Window 개체는 브라우저에 열려 있는 창을 나타냅니다. 문서에 프레임(프레임 또는 iframe 태그)이 포함되어 있으면 브라우저는 HTML 문서에 대한 창 개체와 각 프레임에 대한 추가 창 개체를 만듭니다.

인터넷에서 정보를 확인해보니 JS가 iframe에서 HTML 요소를 조작하는 방법을 발견했습니다. 예는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

           기능 ShowExit() {
//iframe의 창 개체 가져오기
            var topWin = window.top.document.getElementById("topNav").contentWindow;
//획득한 윈도우 객체를 통해 HTML 요소를 동작시키며 일반 페이지와 동일함
               topWin.document.getElementById("exit").style.visibility = "visible";
          } 

참고: 첫 번째 단계에서 최상위 메뉴 페이지(topPage.htm)가 있는 iframe 객체는 두 번째 단계인 iframe에서 window.top.document.getElementById("topNav") 메서드를 통해 가져옵니다. 이전 단계에서 얻은 객체를 얻습니다. contentWindow 속성은 iframe의 요소가 위치한 창 객체를 얻습니다. 세 번째 단계는 이전 단계에서 얻은 window 객체를 통해 iframe 프레임의 요소를 조작하는 것과 같습니다. iframe 프레임이 아닌 일반 HTML 요소를 작동하는 것과 같습니다.