iframes_javascript 기술 전반에 걸쳐 js, css 및 기타 파일의 동적 로드-JS 튜토리얼-php.cn

iframes_javascript 기술 전반에 걸쳐 js, css 및 기타 파일의 동적 로드

WBOY

풀어 주다： 2016-05-16 16:58:25

원래의

1202명이 탐색했습니다.

1. js 및 css 파일을 동적으로 로드합니다(기본 js 및 jquery 사용)

iframe 구조:
frame0(상위)
frame2(하위)
frame3(하위)

frame2에서 이벤트를 트리거하고 js, css 파일 및 dom 요소를 프레임3에 동적으로 로드하시겠습니까?

* 피어 간에 호출할 수 있으며 자식-부모-자식 방식으로 호출할 수 있습니다.
parent.parentFram("이 메서드는 다른 하위 농장을 호출합니다.")

1. jquery의 Append()

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

빠른 속도와 동기화(jquery 도입 필요)

var oBody = document.getElementById("frame3_id").contentWindow.$("body")

var str = "

.. .< /div>"
var scriptTag = document.getElementById("frame3_id").contentWindow.document.getElementById("pop");
if(!scriptTag){
oBody.append(str );
}

var oScript= document.createElement("script");
oScript.id = "oScript1"
oScript.type = "text/javascript"; >oScript.src="/test.js";
var oTag1 = document.getElementById("frame3_id").contentWindow.document.getElementById("oScript1")
if(!oTag1){
oBody.append (oScript);
}

document.getElementById("frame3_id").contentWindow.test(); //frame3_id에서 test() 메서드 호출

** *********************************
위의 예: a. jquery를 도입해야 합니다.
** *********************************
appendChild() of 2.js

속도 느림, 비동기(js 로드 여부 확인 필요)

예시 2:

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

var str = "...
" 
var popDiv=document.createElement('div'); 🎜>popDiv.style.xx = xxx ; 
popDiv.id = "pop"; 
popDiv.innerHTML = 
var oBody = document.getElementById("frame3_id").contentWindow.document.getElementsByTagName ("body")[0]; 
var oHead = document.getElementById("frame3_id").contentWindow.document.getElementsByTagName("head") 

if(oHead && oHead.length) 
oHead = oHead[0] ; 
}else{ 
oHead = oBody; 
} 

var elemDivTag = document.getElementById("frame3_id").contentWindow.document.getElementById ("pop"); 
 if(!elemDivTag){ 
oBody.appendChild(popDiv) 
} 

var oScript= document.createElement("script"); ) 
oScript.id = "oScript1 "; 
oScript.type = "text/javascript" 
oScript.src="/test.js" 
var scriptTag = document.getElementById(" main").contentWindow.document.getElementById( "oScript1"); 
if(!scriptTag){ 
oHead.appendChild(oScript); 
} 
oScript.onload = oScript.onreadystatechange = 함수 (){ 
if ((! this.readyState) || this.readyState == "완료" || this.readyState == "로드됨" ){ 
document.getElementById("main").contentWindow. test(); // test() 메소드 가져온 js 파일에서 
}else{ 
console.info("oScript2.js 파일을 로드할 수 없습니다.") 
} 
} 