iframes_javascript スキル全体での js、css、およびその他のファイルの動的読み込み

1. js および css ファイルを動的にロードします (ネイティブ js および jquery を使用)

iframe 構造:
frame0 (親)
frame2 (子)
frame3 (子)

frame2でイベントをトリガーし、js、cssファイル、dom要素をframe3に動的にロードしますか？

* ピア間で呼び出すことができ、子-親-子の方法で呼び出すことができます。
parent.parentFram("このメソッドは他のサブファームを呼び出しています"); 1. jquery の append()

コードをコピー コードは次のとおりです。

高速かつ同期 ( jquery の導入が必要)

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

var str = "

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

var oScript= document.createElement("script");
oScript.id = "oScript1"; >oScript.src="/test.js";
var oTag1 = document.getElementById("frame3_id").contentWindow.document.getElementById("oScript1"); oBody.append (oScript);

document.getElementById("frame3_id").contentWindow.test(); // Frame3_id で test() メソッドを呼び出します


** ********************************
上記の例: a. jquery を導入する必要があります。
** **********************************
2.js の appendChild()

速度が遅い、非同期 (js がロードされているかどうかを判断する必要がある)

例 2:




コードをコピー


コードは次のとおりです。

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"); )
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() メソッド インポートされた js ファイル内
}else{
console.info("oScript2.js ファイルをロードできません")
}
}