Maison > interface Web > js tutoriel > Chargement dynamique de fichiers js, css et autres à travers les compétences iframes_javascript

Chargement dynamique de fichiers js, css et autres à travers les compétences iframes_javascript

WBOY
Libérer: 2016-05-16 16:58:25
original
1223 Les gens l'ont consulté

1. Chargez dynamiquement les fichiers js et css (en utilisant js et jquery natifs)

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

Déclencher des événements dans frame2 et charger dynamiquement des fichiers js, css et des éléments dom dans frame3 ?

* Peut être appelé entre pairs, et peut être appelé de la manière enfant-parent-enfant
parent.parentFram("Cette méthode appelle une autre sous-ferme"); 1. jquery's append()


Vitesse rapide et synchronisation (Besoin d'introduire 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.src="/test.js";
var oTag1 = document.getElementById("frame3_id").contentWindow.document.getElementById("oScript1"); oBody.append (oScript);
}

document.getElementById("frame3_id").contentWindow.test(); // Appelez la méthode test() dans frame3_id


** ********************************
L'exemple ci-dessus : a. Besoin d'introduire jquery ;
** **********************************
appendChild() de 2.js
Vitesse lente, asynchrone (besoin de déterminer si js est chargé)

Exemple 2 :




Copier le code

Le code est le suivant : 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 ("corps")[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(); // méthode test() Dans le fichier js importé
}else{
console.info("impossible de charger le fichier oScript2.js");
}
}

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal