Aggiungere script e css dinamicamene all' HEAD della pagina

Tramite JavaScript è possibile aggiungere dei riferimenti a file esterni JavaScript, CSS o inserire direttamente degli stili CSS nell'head della pagina.

Questo è un esempio:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Test dynamic load</title>
</head>
<body>
  <div>Color red</div>
 
  <!-- carica dinamicamente le risorse -->
  <script type="text/javascript" src="dynamicLoad.js"></script>
 
</body>
</html>

Il file che carica le risorse

File: dynamicLoad.js

JavaScript

//prendo il riferimento al tag head
var head = document.getElementsByTagName("head")[0];

//<script src="https://ssl.google-analytics.com/ga.js" async="" type="text/javascript"></script>
// carica lo script che aggiunge il testo
var sc = document.createElement("script");
sc.type = "text/javascript";
sc.src="main.js";
sc.async = true;
head.appendChild(sc);

//<link type="text/css" href="css/docs.css" rel="stylesheet">
// carica il file css che imposta il colore rosso ai tag DIV
var sc1 = document.createElement("link");
sc1.type = "text/css";
sc1.href="main.css";
sc1.rel="stylesheet"
head.appendChild(sc1);

//<style type="text/css">dov{text-decoration:underline;}</style>
// imposta lo stile underline per i tag DIV
var sc2 = document.createElement("style");
sc2.type = "text/css";
sc2.innerHTML="diiv{text-decoration:underline;}";
head.appendChild(sc2);

File di supporto all'esempio:

File: main.css

CSS

div {
	color:red;
}

File: main.js

JavaScript

var obj=document.getElementsByTagName("div")[0];
var s=obj.innerHTML;
obj.innerHTML=s+" aggiunto";

Il risultato visivo è il seguente
Color red aggiunto
ovvero

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>TEMP</title>
<script async="" src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="main.css" type="text/css">
<style type="text/css">div{text-decoration:underline;}</style>
</head>
<body>
	<div>Color red aggiunto</div>
</body>
</html>
Tags:
Esempi225 HTML74 JavaScript184
Potrebbe interessarti anche: