iframe_jquery를 작동하는 jquery 방법

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

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

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

HTML

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

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

jQuery

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

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

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

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

HTML

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

src="/index-blank.html" width="300" height="100">

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이 있는 경우

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

ifame에는 someID가 포함되어 있습니다

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

이 콘텐츠를 받고 싶습니다

someID 콘텐츠 가져오기

코드 복사 코드는 다음과 같습니다. $("#mainiframe").contents().find("someID").html()html 또는

$("#mainiframe").contains().find("someID").text() 값

위 그림과 같이 2개
leftiframe의 jQuery는 mainiframe의 콘텐츠와 someID의 콘텐츠를 운영합니다

$("#mainframe",parent.document.body).contents().find("someID").html() 또는
$("#mainframe",parent.document.body).contents().find("someID").val()

Jquery는 iframe이 속한 상위 창에서 ID가 xuan인 태그를 가져옵니다.

$(window.parent.document).find("#xuan").html(x);//

//JS는 요소를 생성하여 상위 요소의 Iframe에 추가합니다. 요소의 DOM 작업 문제:

iframe의 상위 창에서 메서드를 직접 호출: 상위 창에 add 메서드가 있다고 가정합니다.

self.parent.add();

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

IE와 Firefox의 iframe 문서 개체 차이점

IE6 및 IE7에서는 document.frames[ID].document를 사용하여 iframe 하위 창에서 문서 개체에 액세스할 수 있습니다. 그러나 이는 W3C 표준을 준수하지 않는 작성 방법이기도 하며 고유한 방법입니다. Firefox에서는 W3C 표준을 준수하는 document.getElementById(ID).contentDocument 메서드를 사용합니다. 오늘 예제를 작성할 때 IE8에서도 테스트했습니다. W3C 표준을 준수하는 방식을 사용합니다
document.getElementById(ID).contentDocument 메소드. 따라서 우리는 IE와 Firefox에서 iframe을 얻는 보편적인 방법을 작성할 수 있습니다
문서 객체의 기능—getIFrameDOM:

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

functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}

추신: 문서 개체 대신 iframe의 창 개체를 가져오려면 document.getElementById(ID).contentWindow 메서드를 사용할 수 있습니다. 이러한 방식으로 하위 창의 기능과 같이 하위 창의 창 개체를 사용할 수 있습니다.

자식 창에서 상위 창의 기능을 사용하여 상위 창의 문서 객체를 얻습니다

자식 창에서는 부모를 통해 부모 창의 창 개체를 가져올 수 있습니다. 부모 창에 getIFrameDOM이라는 함수가 있으면 parent.getIFrameDOM을 통해 호출할 수 있습니다. parent.document. 상위 창의 문서 개체는 하위 창에서 액세스할 수 있습니다.

JavaScript를 사용한 iframe DOM 조작의 예

먼저 상위 창에 ID가 wIframeA 및 wIframeB이고 주소가 각각 a.html 및 b.html인 두 개의 iframe 하위 창을 도입합니다.
상위 창의 주요 HTML 코드는 다음과 같습니다.

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

iframeB의 JavaScript 기능으로 대체 가능~

frameborder="0"> src="b.html" scrolling="no"frameborder="0">

하위 창 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()