IE와 Firefox의 iframe document 객체 차이점!

 function getIframeInnerHtml(id) 
  { 
  	var doc; 
  	try{
  	   
  	    doc = document.getElementById(id).contentDocument || document.frames[id].document;
  	    return doc.body.innerHTML;
  	}catch(e){}
       return "";
  } 

 
IE6, IE7에서는 document을 사용할 수 있습니다.frames[ID].iframe 하위 창의 문서 대상에 접근하는 데 사용되는 문서입니다. 그러나 이것은 W3C 표준에 부합되지 않는 쓰기 방법이자 IE에서만 사용하는 방법입니다. Firefox에서는 사용할 수 없습니다. Firefox에서는 W3C 표준에 부합되는 문서를 사용합니다.getElementById(ID).콘텐츠Document 방법, 오늘 제가 실례를 쓸 때 IE8을 통해 테스트를 했습니다. IE8도 W3C 표준에 부합되는document을 사용했습니다.getElementById(ID).contentDocument 메서드.따라서 IE와 Firefox에서 공통적으로 iframe document 대상을 가져오는 함수 - getiframe DOM:

    function getIFrameDOM(id){
     return document.getElementById(id).contentDocument || document.frames[id].document;
    }

 
P.S.: 문서 대상이 아닌 iframe의 window 대상을 가져오려면 문서를 사용할 수 있습니다.getElementById(ID).콘텐츠 윈도 방법.이렇게 하면 우리는 하위 창의 윈도우 대상을 사용할 수 있다. 예를 들어 하위 창의 함수를 사용할 수 있다.

하위 창에서 부모 창의 함수를 사용하여 부모 창의document 대상을 가져옵니다

하위 창에서, 우리는parent를 통해 부모 창의 window 대상을 얻을 수 있습니다. 만약 우리가 부모 창에 getiframeDOM이라는 함수가 있다면,parent를 통과할 수 있습니다.getiframeDOM을 호출합니다. 우리는parent를 사용합니다.문서는 하위 창에서 부모 창의 문서 대상에 접근할 수 있습니다.

JavaScript를 사용한 iframe DOM 작업 인스턴스

우선, 우리는 부모 창에 두 개의 iframe 서브 창을 도입했는데 ID는 각각 wIframeA, wIframeB이고 주소는 각각 a.html, b.html이다.부모 창의 기본 HTML 코드는 다음과 같습니다.

<div id="pHello" style="margin:10px auto;width:360px;height:30px;"> iframeB JavaScript ， ~</div>
<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에 Hello라는 ID의 P를 넣어서 DOM 작업 프레젠테이션을 편리하게 했습니다. 하위 창 A, B의 주요 HTML 코드는 다음과 같습니다.

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

 
1. iframe에서 부모 창은 하위 창의 DOM을 조작한다
부모 창과 자식 창이 만들어져 있습니다. 그러면 부모 창에서 다음 iframe A () 함수를 통해 자식 창 A 를 P 의 배경색으로 빨간색으로 바꿀 수 있습니다.

    function iframeA(){// A ID hello 
     var a = getIFrameDOM("wIframeA");
     a.getElementById('hello').style.background = "red";
    }
    function getIFrameDOM(id){// IE、Firefox iframe DOM 
     return document.getElementById(id).contentDocument || document.frames[id].document;
    }

 
2. iframe에서 하위 창은 부모 창의 DOM을 조작한다
하위 창에서 우리는 부모 창 DOM 조작을 편리하게 할 수 있다. DOM 조작 전에 이가parent 대상을 추가하는 방법만 있으면 된다. 예를 들어 위의 하위 창 B에서 우리는 아래의 코드를 사용하여 부모 창의 ID가'pHello'인 내용을 바꿀 수 있다.

parent.document.getElementById("pHello").innerHTML="<p style='background:#000;color:#fff;font-size:15px;'>O(∩_∩)O ~ B ！ ？</p>";

 
3. iframe에서 하위 창 A는 하위 창 B의 DOM을 조작한다
하위 창이 부모 창의 윈도우 대상과 문서 대상을 조작할 수 있는 이상 하위 창도 다른 하위 창의 DOM을 조작할 수 있다. 끊어진 다리 잔설은 하위 창 B에서parent를 사용하여 부모 창의 getiframeDOM 함수를 직접 호출하여 하위 창 A의 문서 대상을 얻을 수 있다. 그러면 하위 창 A의 내용을 수정하는 것은 매우 간단하다. 예를 들어 다음과 같은 코드와 같다.

var a=parent.getIFrameDOM("wIframeA");
a.getElementById('hello').innerHTML="<span style='color:blue;font-size:18px;background:yellow;'>