jquery를 사용하여 iframe을 작동하는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 jquery를 사용하여 iframe을 작동하는 단계에 대해 자세히 설명하겠습니다. jquery를 사용하여 iframe을 작동할 때 주의 사항은 무엇입니까?

먼저 JQUERY

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

Example

<p>Hello <a href="http://ejohn.org/">John</a>, how are 
you doing?</p>

로그인 후 복사

jQuery

$("p").contents().not("[nodeType=1]").wrap("<b/>");结果:
<p><b>Hello</b> 
<a href="http://ejohn.org/">John</a>, <b>how are you 
doing?</b></p>

로그인 후 복사

Description:
빈 프레임에 일부 콘텐츠 추가

HTML

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

로그인 후 복사

jQuery

$("iframe").contents().find("body")
.append("I'm in an iframe!");

로그인 후 복사

Remove the border of the iframeframeborder=" 0"

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

<iframe id="leftiframe"...</iframe> 
<iframe id="mainiframe..</iframe>

로그인 후 복사

leftiframe의 jQuery는 메인프레임의 src 코드를 변경합니다:

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

로그인 후 복사

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

<iframe id="mainifame"...></ifame>

로그인 후 복사

ifame에는 someID

<p id="someID">you want to get this content</p>

로그인 후 복사

someID의 콘텐츠 가져오기

$("#mainiframe").contents().find("someID").html()html 或者 
$("#mainiframe").contains().find("someID").text()值

로그인 후 복사

2 위에 표시된 대로
leftiframe의 jQuery는 메인iframe의 콘텐츠 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);//

로그인 후 복사

// Node.js는 요소를 생성하고 상위 요소의 Iframe에 있는 요소의 DOM 작업 문제에 추가합니다.

iframe의 상위 창에서 메서드를 직접 호출합니다. 상위 창에 추가 메서드

self.parent.add가 있다고 가정합니다. ();

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

IE와 Firefox의 iframe 문서 개체 차이

IE6과 IE7에서는 document.frames[ID].document를 사용하여 액세스할 수 있습니다. iframe 하위 창에 document 개체가 있지만 이는 W3C 표준을 준수하지 않는 IE 고유의 작성 방법입니다. Firefox에서는 호환되는 document.getElementById(ID).contentDocument 메서드를 사용합니다. W3C 표준 오늘은 테스트할 때 IE8도 W3C 표준을 준수하는
document.getElementById(ID).contentDocument 메서드를 사용하여 예제를 작성합니다. 따라서 IE 및 Firefox에서 iframe
document 개체를 가져올 수 있는 함수를 작성할 수 있습니다. getIFrameDOM:

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

로그인 후 복사

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

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

자식 창에서 부모에 함수가 있으면 부모 창의 창 객체를 얻을 수 있습니다. getIFrameDOM이라는 창에서 parent.getIFrameDOM을 통해 호출할 수 있습니다. 마찬가지로 parent.document를 사용하여 하위 창에 있는 상위 창의 문서 개체에 액세스할 수 있습니다.

JavaScript 사용iframe DOM 작업의 예

먼저 상위 창에 ID wIframeA 및 wIframeB, 주소 a.html, b.html을 사용하여 두 개의 iframe 하위 창을 도입합니다.
상위 창의 기본 HTML 코드는 다음과 같습니다.

<p id="pHello" style="margin:10px 
auto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数，来替换哦~</p> 
<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" 
frameborder="0"></iframe> <iframe id="wIframeB" name="myiframeB" 
src="b.html" scrolling="no" frameborder="0"></iframe>

로그인 후 복사

하위 창 A와 B에는 DOM 작업 시연을 용이하게 하기 위해 ID hello와 함께 P를 넣었습니다.

<p id="hello">Hello World!</p>

로그인 후 복사

1. iframe에서는 부모창이 자식창의 DOM을 동작하게 되는데, 부모창과 자식창이 생성되므로 부모창에서는 다음과 같은 iframeA() 함수를 사용할 수 있습니다. window 자식 창 A의 배경색을 빨간색으로 변경합니다. ：

functioniframeA(){//给子窗口A改变ID为hello的背景色
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을 편리하게 조작할 수 있습니다. 예를 들어, 위의 하위 창 B에서 다음 코드를 사용하여 상위 창의 콘텐츠를 "pHello" ID로 바꿀 수 있습니다.

--------------- ----

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

하위 창은 window 개체와 부모 창의 문서 개체, 하위 창은 다른 하위 창의 DOM도 작동할 수 있습니다. ~Broken Bridge Canxue는 하위 창 B의 부모를 직접 사용하여 상위 창에서 getIFrameDOM 함수를 직접 호출하여 얻을 수 있습니다. 하위 창 A의 문서 개체입니다. 이러한 방식으로 다음 코드에 표시된 것처럼 하위 창 A의 내용을 수정하는 것은 매우 간단합니다.

vara=parent.getIFrameDOM("wIframeA");

로그인 후 복사

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

一个iframe高度自动变化的问题搞了我半天，网上找了下资料，不是很好，结合了一下jquery(版本1.3.2)，4行代码即可，完美兼容IE、Firefox、Opera、Safari、Google
Chrome,js如下:

function  heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}else{
          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//这行可代替上一行，这样heightSet
函数的参数
可以省略了
          //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
}
       document.getElementById("thisFrameId").height=bodyHeight;  
}
<iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src=""onload="heightSet(this)"></iframe>

로그인 후 복사

引用

this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用

都在说一个异步的问题，如果你ajax用得特别多,但又不想每次都去设置，那动态改变iframe肯定达不到你的代码清洁要求，没办法，要么你就脱离iframe。我只能说说一般处理方式，毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

Js代码