홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

자바스크립트를 사용하여 iframe에서 DOM에 액세스하고 작동합니다.

저자：Eve Cole 업데이트 시간：2009-06-11 16:22:06

많은 사람들은 iframe을 원하는 대로 작동할 수 있다면 좋겠다는 생각을 항상 갖고 있었습니다. 이러한 방식으로 정적 페이지는 백그라운드 동적 페이지인 php, jsp 및 asp에 포함하고 요구하는 것과 동일한 통합 다중 페이지 레이아웃을 구현하는 기능을 갖습니다.

Javascript의 도움으로 iframe 객체 속성 src가 가리키는 html 페이지의 콘텐츠를 배경처럼 동적으로 로드할 수 있습니다. 이러한 작업을 수행하려면 두 페이지를 제공해야 합니다. 한 페이지는 iframe이 있는 페이지( 페이지 이름: iPage.html )이고 다른 페이지는 iframe 속성 src( 페이지 이름: srcPage.html )가 가리키는 페이지입니다.

iPage.html, <body>의 dom:

  1. < iframe id = " iId " 이름 = " iName " src = " srcPage.html " 스크롤 = “ 아니요 ” frameborder = " 0 " > </iframe> srcPage.html

,<body>in

  1. dom : <h1> 자매 의 날 </h1>  
  2. < p > 아침에는 아침을 먹고, 점심에는 데이트를 하고, 오후에는 노래방에서 노래를 부르고, 저녁에는 동생과 장난을 칩니다. </ p >

IE에서 JS로 위의 두 페이지를 어떻게 조작할지 논의한 후, Firefox의 방법을 논의하고 마지막으로 IE 및 Firefox와의 호환성을 제공합니다. 브라우저의 iframe 객체 작동 방법.

1. IE에서 iframe의 콘텐츠에 액세스하고 운영합니다.

 

iframe이 비표준 HTML 태그라는 것은 누구나 알고 있습니다. 이는 IE 브라우저에서 실행되는 다중 레이아웃 태그입니다. 나중에 Mozilla도 이 태그를 지원합니다. (가십, ㅎㅎ)

1. IE는 document.frames
  1. [ " IframeName " ] 을 통해

얻습니다. 예: iPage.html의 srcPage.html에 h1의 내용을 출력합니다. JS는 다음과 같습니다.

  1. iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;

페이지에 코드를 추가해도 원하는 내용이 출력되지 않는 것 같습니다. 왜일까요? 나는 이것을 아직 파악하지 못했습니다. 습관적으로 window.onload를 추가하면 출력이 나타납니다. (참고: JS 코드가 이 이벤트에 기록됩니다.) 이에 대해 아는 사람이 있습니까? 이유는 무엇입니까? 변경 후 IE에서는 코드가 출력되지만 Firefox에서는 document.frames가 정의되지 않습니다

  1. . 오류 메시지 : window . () {  
  2.   Alert ( document .frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) }
  3. ) 2.

즉, contentWindow를 사용하여 코드를 얻을 수

  1. 있습니다 . onload = ( function () {  
  2.   var iObj = document.getElementById ( ' iId ' ) .​​​​
  3.   Alert ( iObj . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data )
  4. }) ;

이 메서드는 ie6, ie7, firefox2.0 및 firefox3.0의 테스트를 통과했습니다. 안녕-안녕. (온라인으로 확인한 결과, Mozilla Firefox iframe.contentWindow.focus에서 스크립트 인젝션 공격의 위험이 있는 버퍼 오버플로우 취약점을 발견했습니다.

나중에 이를 백그라운드에서 방지할 수 있다는 말을 듣고 안심했습니다. 그러나 여전히 Firefox의 새 버전에서 이러한 위험을 해결할 수 있기를 바랍니다.)

3. srcPage.html에서 h1 제목

  1. 내용 을 변경 합니다 . document : getElementsByTagName ( ' h1 ' ) [ 0 ] . 그녀의 하루 중 ' ;

contentWindow를 통해 액세스합니다. 노드는 이전과 동일합니다.

2. Firefox에서 iframe의 콘텐츠에 액세스합니다.

Mozilla는 IFrameElmRef.contentDocument 를 통해 iframe의 문서 개체에 액세스하기 위한 W3C 표준을 지원합니다. 이 표준을 통해

  1. var라는
코드를 하나 덜 작성할 수 있습니다.
  1. iObj = document .getElementById ( ' iId ' ) .contentDocument ; alert (
  2. iObj.getElementsByTagName ( ' h1 ' ) [ 0
  3. ] .innerHTML = ' 나는 그녀 의 하루 에 참여 하고 싶습니다 ' ) ;​​​​​
  4. ' )[ 0 ] . firstChild . data ) ;

이제 이 두 브라우저와 호환되는 방법, 즉 contentWindow 방법을 사용할 수 있습니다.

헤이-헤이! iframe을 원하는 대로 작동할 수 있나요? 여전히 불편하다면 iframe에서 콘텐츠를 다시 작성할 수도 있습니다.

3. iframe의 콘텐츠를 다시 작성합니다.

designMode(문서를 편집 가능한 디자인 모드로 설정) 및 contentEditable(콘텐츠를 편집 가능으로 설정)을 통해 iframe의 콘텐츠를 다시 작성할 수 있습니다. 코드:

  1. var iObj = document .getElementById ( ' iId ' ) ; iObj .contentEditable =
  2. true ; document .​​​​
  3. ​​​​​​​
  4. ​​​​​​​​​​
  5. ​​​​​​​​ head > ' )
  6. . document . writeln ( '
  7. <style> body { 배경 : # 000;font-size:9pt;margin: 2px; 패딩: 0px;} </style> ' ) .
'

</head>

  1. <body> </body> </html> ' )
  2. ; iObj . close ( ) ;

us/ library/ms533720(VS.85).aspx

firebug는 그림과 같이 위 코드의 성능을 테스트합니다.

iObj.document.designMode = 'On';

iObj.document.contentEditable = true

;

효과는 변하지 않았으며, 시간 효율성은 주석 전보다 거의 3배나 향상되었습니다. 안녕-안녕. 이 두 개체는 iframe에 콘텐츠를 다시 작성하기 위해 인터넷에서 일부 사람들이 작성하는 방법을 참조합니다. 실제로 다른 요구 사항이 없으면 designMode 및 contentEditable을 사용할 필요가 없습니다.

4. iframe 적응형 높이

위의 원칙을 사용하면 이를 구현하는 것이 매우 간단합니다. iframe의 높이 값을 그 안에 있는 문서의 높이 값으로 설정하기만 하면 됩니다. 코드

  1. : window .onload = ( 함수 () {  
  2. var   iObj = document .getElementById ( ' iId ' ) ; iObj
  3. . height = iObj . contentWindow . document . documentElement . scrollHeight } )
  4. ;​

​이 웹 기술 용어 때문에 Hey, Stinky!

참고 자료:

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/ webpagedesign/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
관련 기사