Dynamic loading of js, css and other files across iframes

Dynamic loading of js, css and other files across iframes_javascript skills

WBOY

Release： 2016-05-16 16:58:25

Original

1203 people have browsed it

1. Dynamically load js and css files (using native js and jquery)

iframe structure:
frame0 (parent)
frame2 (child)
frame3 (child)

Trigger events in frame2 and dynamically load js, css files and dom elements into frame3?

* Can be called between peers, and can be called in the child-parent-child manner
parent.parentFram("This method is calling other sub-farme");

1. jquery’s append()

Copy code The code is as follows:

Fast speed and synchronization ( Need to introduce 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(); // Call the test() method in frame3_id

** *********************************
The above example: a. Need to introduce jquery;
** *********************************
appendChild() of 2.js

Speed Slow, asynchronous (need to determine whether js is loaded)

Example 2:

Copy code The code is as follows:

var str = "...
" 
var popDiv=document.createElement('div'); 
popDiv.style.xx = xxx ; 
popDiv.id = "pop"; 
popDiv.innerHTML = str; 
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"); (css is similar) 
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 = function(){ 
if ((! this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 
document.getElementById("main").contentWindow.test(); // test() method In the imported js file 
}else{ 
console.info("can not load the oScript2.js file"); 
} 
} 