This article mainly introduces how to dynamically load js, css, and other files across iframe. For more information, see section 1. dynamically load js and css files (using native js and jquery)
Iframe structure:
Frame0 (parent)
Frame2 (sub)
Frame3 (sub)
In frame2, the trigger event dynamically loads js, css files, and dom elements to frame3?
* The same level can be called. You can use the child-parent-child method to call the same level.
Parent. parentFram ("This method is calling other sub-farme ");
1. jquery append ()
The Code is as follows:
Fast and synchronous (jquery needs to be introduced)
Var oBody = document. getElementById ("frame3_id"). contentWindow. $ ("body ");
Var str ="
...
"
Var scriptTag = document. getElementById ("frame3_id" 2.16.content#doc ument. getElementById ("pop ");
If (! ScriptTag ){
OBody. append (str );
}
Var oScript = document. createElement ("script ");
OScript. id = "oScript1 ";
OScript. type = "text/javascript ";
OScript. src = "/test. js? 1.1.23 ";
Var oTag1 = document. getElementById ("frame3_id" 2.16.content#doc ument. getElementById ("oScript1 ");
If (! OTag1 ){
OBody. append (oScript );
}
Document. getElementById ("frame3_id"). contentWindow. test (); // call the test () method in frame3_id
***********************************
Example above: a. jquery needs to be introduced;
***********************************
2. js appendChild ()
Slow and asynchronous (determine whether js loading is complete)
Column 2:
The Code is as follows:
Var str ="
...
"
Var popDiv = document. createElement ('P ');
PopDiv. style. xx = xxx;
PopDiv. id = "pop ";
PopDiv. innerHTML = str;
Var oBody = document. getElementById ("frame3_id" 2.16.content#doc ument. getElementsByTagName ("body") [0];
Var oHead = document. getElementById ("frame3_id" 2.16.content20.doc ument. getElementsByTagName ("head ");
If (oHead & oHead. length ){
OHead = oHead [0];
} Else {
OHead = oBody;
}
Var elemDivTag = document. getElementById ("frame3_id" 2.16.content20.doc ument. 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? 1.1.23 ";
Var scriptTag = document. getElementById ("main" mirror.contentcontactdoc ument. 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 (); // The test () method is used in the introduced js file.
} Else {
Console.info ("can not load the oScript2.js file ");
}
}