자 바스 크 립 트 와 iframe 에 관 한 것들.

iframe 페이지 를 삽입 하면 부모 페이지 와 하위 페이지 는 같은 도 메 인 이나 크로스 도 메 인 에서 읽 기와 쓰기 작업 을 쉽게 할 수 있 습 니 다.전혀 다른 도 메 인 에서 도 hash 를 변경 하 는 방식 으로 통신 할 수 있 습 니 다.다음은 9 개의 다른 브 라 우 저 에서 데이터 전송 과 변 경 된 호환성 테스트 를 진행 하 겠 습 니 다.같은 도 메 인 또는 크로스 도 메 인 읽 기 쓰기 작업 iframe 의 콘 텐 츠 부모 페이지 읽 기 쓰기 작업 하위 페이지:

<iframe id="test-iframe" name="test-iframe" src="child.html" scrolling="no" frameborder="0"></iframe>
<script>
window.onload = function () {
  /*
   *                  。
   *     IE6, IE7     contentDocument   ，         
   *  window.frames["iframe Name"] or window.frames[index]
   */
  var d = window.frames["test-iframe"].document;
  d.getElementsByTagName('h1')[0].innerHTML = 'pp';
  alert(d.getElementsByTagName('h1')[0].firstChild.data);
}
</script>

주:window.onload 방법 으로 iframe 의 노드 를 방문 하 십시오.그렇지 않 으 면 브 라 우 저가 오류-접근 을 거부 합 니 다.IE8,Firefox 3.6,Opera 11 에서 DOMReady 에 있 을 때 도 iframe 의 노드 를 방문 할 수 있 습 니 다.하위 페이지 읽 기 쓰기 작업 부모 페이지:

<script>
  parent.document.getElementsByTagName('h1')[0].innerHTML = 'pp';
  alert(parent.document.getElementsByTagName('h1')[0].firstChild.data);
</script>

소결:•1 테스트 는 IE6,IE7,IE8,Firefox 2.0,Firefox 3.0,Firefox 3.6,Chrome 8,Opera 11,Safari 5 를 통 해 문서.getElement ById('id name').contentDocument 은 모두 window.frames["iframe Name"].document 과 같 습 니 다.부모 페이지 와 하위 페이지 JS 에 document.domain='xxx.com'을 각각 추가 해 야 합 니 다.크로스 도 메 인 작업 iframe 의 내용 은 두 웹 페이지 가 있 는 도 메 인 이 같 지 않 을 때 데이터 의 상호 호출 을 실현 하려 면 JS 를 통 해 location 대상 의 hash 속성 값 을 바 꾸 어 서로 통신 할 수 밖 에 없습니다.부모 페이지:

<iframe id="test-iframe" src="http://www.yyy.com/child.html" scrolling="no" frameborder="0"></iframe>
<input type="button" value="send" onclick="sendRequest()" />
<script>
function sendRequest() {
  document.getElementById('test-iframe').src += '#a';
}
var interval = window.setInterval(function(){
  if(location.hash) {
    alert(location.hash);
    window.clearInterval(interval);
  }
},1000);
</script>

하위 페이지:

<h1>RRRRRR</h1>
<script>
var url = 'http://www.xxx.com/father.html';
    oldHash = self.location.hash,
    newHash,
    interval = window.setInterval(function(){
        newHash = self.location.hash;
        if(oldHash != self.location.hash) {
        document.getElementsByTagName('h1')[0].innerHTML = 'pp';
        //alert(parent.location.href); //      ，         
        parent.location.href = url + '#b';
          window.clearInterval(interval);
        }
    },500);
</script>

소결:•1 테스트 IE6,IE7,IE8,Firefox 2.0,Firefox 3.0,Firefox 3.6,Chrome 8,Opera 11,Safari 5,IE6,IE7 을 제외 하고 해시 만 바 꾸 면 브 라 우 저 history 에 기 록 됩 니 다.2.하위 페이지 에서 parent.location.replace 방법 으로 부모 페이지 가 서버 에 요청 을 보 내 는 것 을 피 하려 고 합 니 다.그러면 이론 적 으로 브 라 우 저 는 역 사 를 기록 하지 않 지만 효 과 를 보지 못 합 니 다.2.하위 페이지 는 부모 페이지 의 url 을 읽 을 권리 가 없 지만 부모 페이지 의 url 에 대해 쓰기 작업 을 할 수 있 습 니 다.따라서 도 메 인 작업 을 할 때 부모 페이지 의 url 은 전단 에서 도 메 인 문 제 를 해결 하 는 한계 가 크기 때문에 서버 측 으로 해결 하 는 것 이 좋 습 니 다.