JS가 iframe에서 객체 요소와 문서를 획득/설정하는 여러 가지 방법
1. IE 관련(프레임 인덱스를 통한 이미지 위치 지정):
코드 복사 code 다음과 같습니다:
document.frames[i].document.getElementById('ID of element');
2. IE 특정(iframe 이름을 통한 이미지 위치 지정):< /p>
다음과 같이 코드를 복사하세요:
document.frames['iframe's name'].document.getElementById('element's ID');
위 방법은 iframe에만 적용되는 것이 아니고, 프레임셋의 프레임에도 적용됩니다. IE는 자체 표준을 설정하는 데 능숙하지만 디자인 중 상당수가 더 인간적이라고 말하고 싶습니다. 예를 들어, 이는 다음과 같은 표준 경로를 지원하는 것 외에도 간결하고 시각적인 작성 방법을 제공합니다.
3. 일반 방법:
다음과 같이 코드를 복사합니다:
document.getElementById('iframe's ID').contentWindow.document.getElementById('element ID')
contentWindow를 추가할 때는 주의하세요. 프레임과 iframe 내부의 창 개체를 나타내기 때문에 간과되기 쉽기 때문에 문제가 자주 발생합니다.
JS가 iframe 문서 콘텐츠를 가져옵니다.
다음과 같이 코드를 복사하세요.
참고: 위의 .contentDocument는 다음과 같습니다. .contentWindow.document !
1. 요구사항 및 문제점
iframe 프레임워크 레이아웃은 상단 메뉴, 왼쪽 탐색 및 메인 페이지를 포함하여 웹사이트의 백그라운드 관리에 사용됩니다. 요구 사항은 다음과 같습니다. 메인 페이지에서 버튼을 클릭하고 상단 메뉴 표시줄 오른쪽에 "종료" 링크를 표시합니다. 시스템을 종료하려면 클릭하세요.
제 생각은: 상단 메뉴 페이지에 보이지 않는 "종료" 링크를 넣는 것입니다. 사용자가 iframe에 있는 기본 페이지(mainPage.htm)에서 버튼을 클릭하면 상단 메뉴 페이지 "종료"가 나타납니다. "가 오른쪽에 나타납니다.
지금 직면한 문제는 페이지의 iframe 하위 페이지(mainPage.htm)에 있는 다른 iframe 하위 페이지(예: topPage.htm)의 HTML 요소를 어떻게 얻고 작동합니까?입니다.
둘째, JS를 통해 iframe의 요소를 얻어서 조작하여 문제를 해결합니다.
여기서 주된 목적은 JS를 통해 Window 객체를 조작하는 것입니다. Window 개체는 브라우저에 열려 있는 창을 나타냅니다. 문서에 프레임(프레임 또는 iframe 태그)이 포함되어 있으면 브라우저는 HTML 문서에 대한 창 개체와 각 프레임에 대한 추가 창 개체를 만듭니다.
인터넷에서 정보를 검색한 결과 JS가 iframe에서 HTML 요소를 조작하는 방법을 찾았습니다. 예는 다음과 같습니다.
다음과 같이 코드를 복사하세요:
function ShowExit() {
//iframe의 창 개체 가져오기
var topWin = window.top.document.getElementById("topNav").contentWindow;
//얻은 윈도우 객체를 통해 HTML 요소를 조작하는데, 이는 일반 페이지와 동일합니다.
topWin .document.getElementById( "exit").style.visibility = "visible";
}
설명: 첫 번째 단계에서는 window.top.document를 통해 가져옵니다. getElementById("topNav") 메소드 두 번째 단계에서는 얻은 iframe 객체의 contentWindow 속성을 통해 iframe의 요소가 위치한 window 객체를 가져옵니다. 이전 단계에서는 이전 단계에서 얻은 window 객체를 얻습니다. iframe의 요소를 조작하는 것은 iframe에 없는 일반 HTML 요소를 조작하는 것과 같습니다.