Maison interface Web js tutoriel Comment importer dynamiquement des fichiers de ressources statiques tels que js et css à l'aide des compétences javascript_javascript

Comment importer dynamiquement des fichiers de ressources statiques tels que js et css à l'aide des compétences javascript_javascript

May 16, 2016 pm 03:48 PM
css javascript js importation dynamique 静态资源文件

L'exemple de cet article décrit la méthode d'importation dynamique de fichiers de ressources statiques tels que js et css à l'aide de javascript. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

/**
 * 动态导入静态资源文件js/css
 */
var $import = function(){
  return function(rId, res, callback){
    if(res && 'string' == typeof res){
      if(rId){
        if($($('#' + rId), $('head')).length>0){
          return;
        }
      }
      //加载资源文件
      var sType = res.substring(res.lastIndexOf('.') + 1);
      // 支持js/css
      if(sType && ('js' == sType || 'css' == sType)){
        var isScript = (sType == 'js');
        var tag = isScript ? 'script' : 'link';
        var head = document.getElementsByTagName('head')[0];
        // 创建节点
        var linkScript = document.createElement(tag);
        linkScript.type = isScript ? 'text/javascript' : 'text/css';
        linkScript.charset = 'UTF-8';
        if(!isScript){
          linkScript.rel = 'stylesheet';
        }
        isScript ? linkScript.src = res : linkScript.href = res;
        if(callback && 'function' == typeof callback){
          if (linkScript.addEventListener){
            linkScript.addEventListener('load', function(){
              callback.call();
            }, false);
          } else if (linkScript.attachEvent) {
            linkScript.attachEvent('onreadystatechange', function(){
              var target = window.event.srcElement;
              if (target.readyState == 'complete') {
                callback.call();
              }
            });
          }
        }
        head.appendChild(linkScript);
      }
    }
  };
}();

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD
Musée à deux points: toutes les expositions et où les trouver
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment définir des attributs inconnus dans vscode Méthode vscode pour définir des attributs inconnus Comment définir des attributs inconnus dans vscode Méthode vscode pour définir des attributs inconnus May 09, 2024 pm 02:43 PM

1. Tout d'abord, ouvrez l'icône des paramètres dans le coin inférieur gauche et cliquez sur l'option des paramètres. 2. Ensuite, recherchez la colonne CSS dans la fenêtre sautée. 3. Enfin, remplacez l'option déroulante dans le menu Propriétés inconnues par le bouton d'erreur. .

Étapes graphiques pour définir les propriétés par défaut de CSS dans Visual Studio 2019 Étapes graphiques pour définir les propriétés par défaut de CSS dans Visual Studio 2019 May 09, 2024 pm 02:01 PM

1. Ouvrez Visual Studio 2019, recherchez ses paramètres d'options et cliquez sur CSS. 2. Ici vous pouvez voir les paramètres techniques des attributs suivants. 3. Vous pouvez maintenant définir le texte et remplir les bordures ici. 4. À ce stade, vous pouvez également définir le positionnement flottant ici. 5. À ce moment, vous pouvez également définir ici la bordure et l'arrière-plan pour terminer l'opération. 6. Enfin, cliquez sur le bouton OK ici pour définir les propriétés CSS par défaut.

Comment isoler les styles dans les composants en vue Comment isoler les styles dans les composants en vue May 09, 2024 pm 03:57 PM

L'isolation des styles dans les composants Vue peut être réalisée de quatre manières : Utilisez des styles étendus pour créer des étendues isolées. Utilisez les modules CSS pour générer des fichiers CSS avec des noms de classe uniques. Organisez les noms de classe à l’aide des conventions BEM pour maintenir la modularité et la réutilisabilité. Dans de rares cas, il est possible d'injecter des styles directement dans le composant, mais cela n'est pas recommandé.

Comment s'inscrire à Bitstamp Exchange Pro ? Est-ce sécuritaire? Est-ce formel ? Comment s'inscrire à Bitstamp Exchange Pro ? Est-ce sécuritaire? Est-ce formel ? Aug 13, 2024 pm 06:36 PM

Comment s'inscrire BitstampPro ? Visitez le site Web BitstampPro. Remplissez vos informations personnelles et votre adresse e-mail. Créez un mot de passe et acceptez les conditions. Vérifiez l'adresse e-mail. BitstampPro est-il sûr ? Authentification requise. Imposez l’utilisation de l’authentification à deux facteurs. La plupart des actifs sont stockés dans des chambres froides. Utilisez HTTPS pour crypter la communication. Effectuer des audits de sécurité réguliers. BitstampPro est-il légitime ? Enregistré au Luxembourg. Réglementé par le Comité luxembourgeois de surveillance financière. Respectez les réglementations en matière de lutte contre le blanchiment d'argent et de connaissance de vos clients.

Comment implémenter la fonction de table personnalisée de clic pour ajouter des données dans l'administrateur DCAT? Comment implémenter la fonction de table personnalisée de clic pour ajouter des données dans l'administrateur DCAT? Apr 01, 2025 am 07:09 AM

Comment implémenter la fonction du tableau de Cliquez sur personnalisé pour ajouter des données dans DCATADMIN (Laravel-Admin) lors de l'utilisation de DCAT ...

La dernière liste de classement de l'application de plateforme de trading de devises virtuelles (inventaire des 10 principales plateformes de trading de devises virtuelles) La dernière liste de classement de l'application de plateforme de trading de devises virtuelles (inventaire des 10 principales plateformes de trading de devises virtuelles) Mar 04, 2025 pm 03:51 PM

Cet article répertorie les dix premiers échanges de crypto-monnaie de premier plan dans le monde, notamment OKX, Binance, Gate.io, Huobi, Kraken, Coinbase, Kucoin, Crypto.com, Bitfinex et Bitstamp. Avec leur forte force technique, leurs riches gammes de produits, leurs opérations de conformité strictes et leur construction écologique innovante, ces échanges ont pris les devants sur le marché mondial des crypto-monnaies. L'article présentera leurs fonctions spéciales, architecture technique, mesures de sécurité, qualifications de conformité et construction d'écosystèmes respectivement, fournissant aux investisseurs une référence aux investisseurs pour choisir une plate-forme de trading appropriée.

Quel est le format du fichier source ? Quel est le format du fichier source ? May 09, 2024 pm 10:51 PM

Les fichiers sources sont des fichiers non compilés contenant du code ou des données d'origine, et leurs formats varient selon les langages de programmation et les applications. Les formats courants incluent les fichiers texte (.txt, .csv), les langages de programmation (tels que .py, .java), les langages de balisage (tels que .html, .css), les fichiers image (tels que .png, . jpg), les fichiers vidéo (tels que .mp4, .avi) et d'autres formats tels que JSON (.json), PDF (.pdf), document Word (.doc), etc.

Que signifie l'indice z ? Que signifie l'indice z ? May 09, 2024 pm 11:21 PM

z-index est une propriété CSS qui contrôle l'ordre dans lequel les éléments se chevauchent sur la page, similaire à l'ordre dans lequel le papier est empilé. Voici comment cela fonctionne : Chaque élément a une valeur z-index par défaut de 0. Les éléments avec des valeurs d'index z plus élevées écraseront les éléments avec des valeurs d'index z inférieures. z-index peut être utilisé pour créer des éléments flottants, contrôler l'ordre des éléments qui se chevauchent et créer des effets tridimensionnels. Lors de l'utilisation, vous devez prendre en compte des éléments tels qu'éviter la surutilisation, utiliser des valeurs négatives et prêter attention à la compatibilité du navigateur.

See all articles