Home Web Front-end JS Tutorial Dynamic loading of js, css and other files across iframes_javascript skills

Dynamic loading of js, css and other files across iframes_javascript skills

May 16, 2016 pm 04:58 PM
dynamic loading

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()

Copy code The code is as follows:

Fast speed and synchronization ( Need to introduce 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.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:
Copy code The code is as follows:

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");
}
}
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Python implements dynamic page loading and asynchronous request processing function analysis for headless browser collection applications Python implements dynamic page loading and asynchronous request processing function analysis for headless browser collection applications Aug 08, 2023 am 10:16 AM

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 How to handle dynamic loading and switching of components in Vue Oct 15, 2023 pm 04:34 PM

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 Revealing the principle of hot update in Golang: insider explanation of dynamic loading and reloading Jan 20, 2024 am 10:09 AM

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 How to create a table that dynamically loads data using Vue and Element-UI Jul 21, 2023 pm 11:49 PM

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 Solve Vue error: Unable to correctly use Vue Router to dynamically load components based on routing parameters Aug 20, 2023 am 08:09 AM

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? phpSpider practical tips: How to deal with dynamic loading of web content? Jul 22, 2023 am 08:33 AM

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 reflection and dynamically load assemblies in C# Oct 08, 2023 pm 12:12 PM

How to use reflection and dynamically load assemblies in C#

How to use the ClassLoader function for dynamic class loading in Java How to use the ClassLoader function for dynamic class loading in Java Jun 26, 2023 pm 02:10 PM

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

See all articles