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

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 파일을 로드할 수 없습니다.")
}
}

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.