Dynamically load js, css and other files across iframes

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

iframe structure:

frame0(father)

frame2 (sub)

frame3 (sub)

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

*Can be called between the same level, and the same level can be called through the child-parent-child method

parent.parentFram("This method is calling other child farms");

1.jquery's append()

The code copy is as follows:

Fast speed, synchronous (need to introduce jquery)

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

var str = "<div>...</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. jquery needs to be introduced;

******************************************

2.js appendChild()

Slow speed, asynchronous (you need to determine whether js has been loaded)

Lesson 2:

The code copy is as follows:

var str = "<div>...</div>"

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 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(); // The test() method is in the imported js file

}else{

console.info("can not load the oScript2.js file");

}

}