


Dynamic loading of js, css and other files across iframes_javascript skills
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()
Fast speed and synchronization ( Need to introduce 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.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:
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");
}
}

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Python implements dynamic page loading and asynchronous request processing function analysis for headless browser collection applications

How to handle dynamic loading and switching of components in Vue

Revealing the principle of hot update in Golang: insider explanation of dynamic loading and reloading

How to create a table that dynamically loads data using Vue and Element-UI

Solve Vue error: Unable to correctly use Vue Router to dynamically load components based on routing parameters

phpSpider practical tips: How to deal with dynamic loading of web content?

How to use reflection and dynamically load assemblies in C#

How to use the ClassLoader function for dynamic class loading in Java
