iframe_jquery를 작동하는 jquery 방법

먼저 JQUERY의 객체 내용()에 대한 도움말 파일을 살펴보겠습니다

내용()
개요
일치하는 요소 내에서 모든 하위 노드(텍스트 노드 포함)를 찾습니다. 요소가 iframe인 경우 문서 콘텐츠를 찾습니다

예시
설명:
모든 텍스트 노드를 찾아 굵게 표시

HTML

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

안녕하세요 Johnhttp://ejohn.org/">John>, 잘 지내세요
뭐해요?

jQuery

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

$("p").contents().not("[nodeType=1]").wrap("");결과:

안녕하세요
Johnhttp://ejohn.org/">John>, 잘 지내세요
뭐해요?

설명:
빈 프레임에 콘텐츠 추가

HTML

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

jQuery

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

$("iframe").contents().find("body")
.append("나는 iframe에 있습니다!");

iframe 테두리 제거 frameborder="0"

1 콘텐츠에 ifame이 2개 있습니다

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

leftiframe의 jQuery는 mainiframe의 src 코드를 변경합니다.

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

$("#mainframe",parent.document.body).attr("src","
http://www.baidu.com")

2 콘텐츠에 메인프레임 ID의 ifame이 있는 경우

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

하위 창 A와 B에는 DOM 작업 시연을 용이하게 하기 위해 ID hello와 함께 P를 배치했습니다. 하위 창 A와 B의 주요 HTML 코드는 다음과 같습니다.

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

Hello World!

1. iframe에서는 상위 창이 하위 창의 DOM을 작동합니다

상위 창과 하위 창이 빌드되었으므로 상위 창에서 다음 iframeA() 함수를 사용하여 하위 창 A의 배경색을 빨간색으로 변경할 수 있습니다.

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

functioniframeA(){//ID hello로 하위 창 A의 배경색 변경
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.Background="red";
}
functiongetIFrameDOM(id){//IE 및 Firefox와 호환되는 iframeDOM 획득 기능
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}

2. iframe에서 하위 창은 상위 창의 DOM을 작동합니다

자식 창에서는 상위 창 DOM을 쉽게 조작할 수 있습니다. DOM 작업 전에 Yige 상위 개체의 메서드만 추가하면 됩니다. 예를 들어 위의 하위 창 B에서는 다음을 사용할 수 있습니다. 코드는 상위 창에서 콘텐츠를 ID "pHello"로 바꿉니다.

------

3. iframe에서는 하위 창 A가 하위 창 B의 DOM을 작동합니다.

자식 창은 부모 창의 창 개체와 문서 개체를 조작할 수 있으므로 자식 창은 다른 자식 창의 DOM도 조작할 수 있습니다~ Broken Bridge Canxue는 자식 창 B에서 부모를 직접 사용하여 에서 getIFrameDOM을 직접 호출할 수 있습니다. 이 함수는 하위 창 A의 문서 개체를 가져오므로 다음 코드와 같이 하위 창 A의 내용을 수정하는 것은 매우 간단합니다.

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

vara=parent.getIFrameDOM("wIframeA");

============================================= === ===================================

iframe 높이 자동 변경 문제로 오랫동안 괴로워서 인터넷으로 정보를 찾아봤는데, jquery(버전 1.3.2)와 결합하니 별로더군요. 4줄의 코드로 IE, Firefox, Opera, Safari, Google과 완벽하게 호환됩니다

크롬, js는 다음과 같습니다.

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

함수 heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
             bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}그밖에{
             bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//이 줄은 이전 줄을 대체할 수 있으므로 heightSet 함수의 매개변수를 생략할 수 있습니다
​​​​​ //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
}
        document.getElementById("thisFrameId").height=bodyHeight
}

인용문

이 키워드는 브라우저마다 의미가 다른 것 같습니다. FF와 IE는 내부 페이지 높이를 얻으려면 iframe의 이름을 사용해야 하지만, 다른 브라우저에서는 이 또는 ID를 사용할 수 있습니다.

인용문

그들은 모두 비동기 문제에 대해 이야기하고 있지만 매번 설정하고 싶지 않다면 iframe을 동적으로 변경하는 것은 확실히 코드 청결성 요구 사항을 충족하지 못할 것입니다. , 또는 iframe을 종료할 수 있습니다. 일반적인 처리 방법에 대해서만 이야기할 수 있습니다. 결국, Ajax 또는 동적 양식은 일반 애플리케이션에서 작은 부분만을 차지하며, 끝에

만 추가하면 됩니다.

JS 코드

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

parent.window.heightSet()