실용적인 프레임(iframe) 연산코드_javascript 스킬

자주 사용되는 코드:

<iframe src="http://www.baidu.com" marginwidth="0" marginheight="0" border="0"
	scrolling="no" frameborder="0"
	width="350" height="270"></iframe>

<iframe src="http://www.jb51.net/plugins/like.php&#63;href=YOUR_URL"
    scrolling="no" frameborder="0"
    style="border:none; width:450px; height:80px"></iframe>

Javascript 액세스 프레임, iframe 및 href 방향

一.frame

1． 상위 프레임에서 하위 프레임으로의 참조

위 원칙을 알면 상위 프레임에서 하위 프레임을 참조하는 것이 매우 쉽습니다. 즉,

window.frames["프레임 이름"];

이는 페이지 내에서 frameName이라는 하위 프레임을 참조합니다. 서브프레임 내에서 서브프레임을 참조하려는 경우 참조된 프레임(실제로는 창 객체)의 특성에 따라 다음과 같이 구현할 수 있습니다.

window.frames["frameName"].frames["frameName2"];

이런 방식으로 두 번째 수준 하위 프레임이 참조되고, 비유적으로는 다중 계층 프레임워크 참조가 달성될 수 있습니다.

2． 하위 프레임에서 상위 프레임으로의 참조

각 창 개체에는 상위 프레임을 나타내는 상위 속성이 있습니다. 프레임이 이미 최상위 프레임인 경우 window.parent는 프레임 자체도 나타냅니다.

3． 형제 프레임워크 간의 참조

두 프레임이 동일한 프레임의 하위 프레임인 경우 형제 프레임이라고 하며 상위 프레임을 통해 서로 참조할 수 있습니다. 예를 들어 페이지에는 2개의 하위 프레임이 포함됩니다.

<frameset rows=”50%,50%”>
  <frame src=”1.html” name=”frame1″ />
  <frame src=”2.html” name=”frame2″ />
</frameset>

frame1에서 다음 명령문을 사용하여 프레임2를 참조할 수 있습니다.

self.parent.frames["frame2"];

4． 다양한 수준의 프레임워크 간 상호 참조

프레임 계층은 최상위 프레임을 위한 것입니다. 레벨이 다른 경우 현재 레벨과 다른 프레임의 레벨 및 이름을 알고 있는 한 프레임에서 참조하는 창 개체의 속성을 사용하여 서로 쉽게 액세스할 수 있습니다. 예를 들면 다음과 같습니다.

self.parent.frames["childName"].frames["targetFrameName"];

5． 최상위 프레임 참조

parent 속성과 마찬가지로 window 객체에도 top 속성이 있습니다. 이는 프레임 자체가 최상위 프레임인지 여부를 결정하는 데 사용할 수 있는 최상위 프레임에 대한 참조를 나타냅니다. 예를 들면 다음과 같습니다.

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

//이 프레임이 최상위 프레임인지 확인
if(self==top){
//무언가
}

즉,

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

if (window.top!=window.self) {
//뭔가
}

프레임 로딩 페이지 변경

프레임에 대한 참조는 창 개체에 대한 참조입니다. 창 개체의 위치 속성을 사용하면 프레임의 탐색을 변경할 수 있습니다.

window.frames[0].location = "1.html";

다른 프레임워크의 JavaScript 변수 및 함수 참조

다른 프레임워크에서 JavaScript 변수와 함수를 참조하는 기술을 소개하기 전에 다음 코드를 살펴보겠습니다.

<script language=”JavaScript” type=”text/javascript”>
<!–
function hello(){
  alert(“hello,ajax!”);
}
window.hello();
//–>
</script>

2.iframe

엄밀히 말하면 프레임 배열과 document.all을 사용해야 합니다.

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

<입력 유형=버튼 onclick=”alert(document.frames.myiframe.document.all.mycheckbox.checked)”>

삼.href

1. 링크의 onclick 이벤트가 먼저 실행된 후 href 속성(페이지 점프 또는 자바스크립트 의사 링크) 아래의 작업이 실행됩니다. 2. href와 onclick이 모두 링크에 존재한다고 가정합니다. href 속성 아래의 작업이 실행되지 않도록 하려면 onclick이 false 반환 값을 얻어야 합니다. 믿을 수 없다면 goGoogle 함수에서 false 반환을 주석 처리할 수 있습니다.
3. 페이지가 너무 길고 스크롤바가 있어서 링크의 onclick 이벤트를 통해 작업을 수행하고 싶은 경우. href 속성은 # 대신 javascript:void(0);로 설정해야 불필요한 페이지 이동을 방지할 수 있습니다.
4. 링크의 href 속성에서 반환값이 있는 함수가 호출되면 현재 페이지의 내용이 이 함수의 반환값으로 대체됩니다.
5. Shift 키를 누르고 있으면 차이가 있습니다.
6. 오늘 제가 겪은 문제는 IE6.0에서 href 형식으로 parentNode에 접근할 수 없다는 것입니다.
7. javascript: 프로토콜을 A의 href 속성으로 사용하지 마십시오. 이로 인해 window.onbeforeunload 이벤트가 불필요하게 트리거될 뿐만 아니라 gif 애니메이션 이미지가 IE에서 재생이 중지됩니다.

예:

비밀번호 변경

프레임 높이 조정

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

window.onload = function() {
 parent.document.getElementById('customiframe').style.height = document.body.clientHeight "px";
}