Javascript 및 iframe_javascript 기술에 대한 사항

iframe에 포함된 페이지의 경우 상위 페이지와 하위 페이지 모두 동일한 도메인에서 또는 하위 도메인 전체에서 쉽게 읽기 및 쓰기 작업을 수행할 수 있습니다. 완전히 다른 도메인의 경우 해시를 변경하여 통신할 수도 있습니다. 아래에서는 9개의 다른 브라우저(버전)에서 데이터 전송 및 변경 사항과의 호환성을 테스트했습니다.
동일한 도메인 또는 하위 도메인 전체의 iframe에서 콘텐츠 읽기 및 쓰기
상위 페이지 읽기 및 하위 페이지 쓰기:

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

<script><BR>window.onload = function () {<BR> /*<BR> * 다음 노드를 얻기 위해 두 가지 방법이 사용됩니다. 모든 콘텐츠 형식이 허용됩니다. <BR> * IE6 및 IE7은 contentDocument 속성을 지원하지 않으므로 여기서는 공통 <BR>이 사용됩니다. * window.frames["iframe Name"] 또는 window.frames[index]<BR> */<BR> var d = window.frames["test-iframe"].document;<BR> d.getElementsByTagName('h1')[0].innerHTML = 'pp';<BR> Alert(d.getElementsByTagName('h1')[0 ].firstChild.data);<BR>}<BR></script>

참고: window.onload를 전달해야 합니다. 메소드 iframe의 노드에 액세스하십시오. 그렇지 않으면 브라우저에 오류 메시지가 표시됩니다. 액세스가 거부되었습니다. IE8, Firefox3.6, Opera11에서는 DOMReady 중에도 iframe의 노드에 액세스할 수 있습니다.
하위 페이지 읽기 및 쓰기 작업 상위 페이지:

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

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

요약:
•1 테스트 통과 IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5.
•2 데이터를 확인하고 document.getElementById('id name').contentDocument가 window.frames와 같은지 확인하세요. ["iframe 이름"].document.
•3 하위 도메인 교차 시 document.domain = 'xxx.com';
iframe 콘텐츠의 교차 도메인 작업
두 웹 페이지가 서로 다른 도메인에 있을 때 상호 데이터 호출을 구현하려면 JS를 통해 위치 객체의 해시 속성 값을 변경해야만 상호 통신이 가능합니다.
상위 페이지:

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

<script><BR>function sendRequest() {<BR> document.getElementById('test-iframe' ).src = '#a';<BR>}<BR>var 간격 = window.setInterval(function(){<BR> if(location.hash) {<BR> Alert(location.hash);<BR> window.clearInterval(간격);<BR> }<BR>},1000);<BR></script>

하위 페이지:

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

RRRRRR

< ;script>
var url = 'http://www.xxx.com/father.html';
oldHash = self.location.hash,
newHash,
간격 = 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';
창. clearInterval(간격);
}
},500);

요약:
•1 IE6을 제외한 IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5에서 테스트됨 , IE7을 제외하고 해시가 변경되면 브라우저 기록에 기록됩니다.
•2 상위 페이지에서 서버에 요청을 보내고 점프하는 것을 방지하기 위해 하위 페이지에서 parent.location.replace 메소드를 사용하려고 하여 이론적으로 브라우저가 기록을 기록하지 않게 하려고 했으나 그렇지 않았습니다. 일하다.
•2 하위 페이지는 상위 페이지의 URL을 읽을 수 있는 권한이 없지만 상위 페이지의 URL에 쓸 수 있으므로 도메인 간 작업을 수행할 때 상위 페이지의 URL을 알아야 합니다. 페이지를 미리
프론트 엔드는 크로스 도메인 문제를 해결하기 때문에 한계가 상대적으로 크기 때문에 서버 측 솔루션을 사용하는 것이 가장 좋습니다