HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

1. スクリプトを動的に読み込む

ウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加します。あまりにも多くの JS スクリプトを導入する必要があり、サイト全体のパフォーマンスが低下するため、適切なタイミングで対応するスクリプトを読み込む動的スクリプトの概念が登場しました。
たとえば、ブラウザを検出する必要がある場合に検出ファイルを導入します。


コードをコピー
コードは次のとおりです。

<script type="text/javascript">
window.onload = 関数(){
アラート(typeof BrowserDetect);
}
var flag = true; //trueに設定してからロードします
if (フラグ) {
loadScript('browserdetect.js'); // 読み込まれたjsを設定する
}
関数loadScript(url) {
var スクリプト = document.createElement('script');
スクリプトタイプ = 'text/javascript';
スクリプトのURLをコピーします。
//document.head.appendChild(script); //document.head は <head> を意味します
document.getElementsByTagName('head')[0].appendChild(スクリプト);
}
</script>js の動的実行</p> <p>
<script type="text/javascript">
window.onload = 関数(){

}
var flag = true; //trueに設定してからロードします
if (フラグ) {
var スクリプト = document.createElement('script');
スクリプトタイプ = 'text/javascript';
var text = document.createTextNode("alert('Lee')"); //IE6、7、8 ブラウザはエラーを報告します
script.appendChild(テキスト);
document.getElementsByTagName('head')[0].appendChild(スクリプト);
}
</script>IE 6、7、8 ブラウザはスクリプトを特別な要素と見なし、子ノードにアクセスできません。互換性のために、代わりにテキスト属性を使用することもできます。 </p> <p>
<script type="text/javascript">
window.onload = 関数(){

}
var flag = true; //trueに設定してからロードします
if (フラグ) {
var スクリプト = document.createElement('script');
スクリプトタイプ = 'text/javascript';
script.text = "alert('Lee')";
script.appendChild(テキスト);
document.getElementsByTagName('head')[0].appendChild(スクリプト);
}
</script> すべてのブラウザと互換性がある必要がある

2. スタイルを動的に読み込む

ウェブサイトのスキンの切り替えなど、スタイルシートを動的に読み込むため。スタイルシートをロードする方法は 2 つあります。1 つは <link> タグ、もう 1 つは <style> タグです。

動的実行リンク


コードをコピー
コードは次のとおりです。

var フラグ = true;
if (フラグ) {
スタイルをロードします('basic.css');
}
関数loadStyles(url) {
var link = document.createElement('link');link.rel = 'スタイルシート';
リンクタイプ = 'text/css';
リンク.href = URL;
document.getElementsByTagName('head')[0].appendChild(リンク);
}


ダイナミック実行スタイル


コードをコピー
コードは次のとおりです。

<script type="text/javascript">
var フラグ = true;
if (フラグ) {
var style = document.createElement('style');
style.type = 'text/css';
//var box = document.createTextNode('#box{background:red}'); // IE6、7、8 はサポートされていません
//style.appendChild(ボックス);
document.getElementsByTagName('head')[0].appendChild(スタイル);
挿入ルール(document.styleSheets[0], '#box', '背景:赤', 0);
}
関数 insertRule(シート、セレクタテキスト、cssテキスト、位置) {
//IE6、7、8でない場合
シートの挿入ルールの場合
sheet.insertRule(セレクタテキスト + "{" + cssテキスト + "}", 位置);
//IE6,7,8の場合
} そうでない場合 (sheet.addRule) {
sheet.addRule(セレクタテキスト、cssテキスト、位置);
}
}
</スクリプト>

<<:  スケルトンスクリーン効果を実現する CSS

>>:  この記事ではSQL CASE WHENの使い方を詳しく説明します

推薦する

静的リソースファイルのアクセスログをフィルタリングするNginxの実装

乱雑なログ日常的に使用される Nginx は、静的リソース サーバーとリバース プロキシ サーバーの...

Vueプロジェクトをパッケージ化してリリースする手順

目次1. 開発環境から本番環境への移行2. 統一されたリクエストパスを設定する3. パッケージ化コマ...

CentOS7 で ethereum/Ethereum を最初からインストールする

目次序文sudo書き込み権限を追加するgit 2.9.0をインストールopenssl 1.1.1l ...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

nginx での listen ディレクティブの例の分析

プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...

MySQL トランザクション分離レベルの表示と変更の例

トランザクション分離レベルを確認するMySQL では、'%tx_isolation%'...

VMware ワークステーションの仮想マシンの互換性の問題に対する解決策

VMware ワークステーションの仮想マシンの互換性の問題を解決するにはどうすればよいですか?ノート...

Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

目次序文1. MySQLをアンインストールする2. MySQLをインストールする要約する序文学習中に...

Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入

展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...

Linux sftp コマンドの使用法の概要

sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...

VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス

仮想マシンソフトウェア: VMware Workstationイメージ: deepin-deskto...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

Linux コマンドラインでメールを送信する 5 つの方法 (推奨)

シェル スクリプトで電子メールを作成する必要がある場合は、コマンド ラインから電子メールを送信する知...

3つの主要データベース（Mysql、SqlServer、Oracle）の違いについて簡単に説明します。

マイグレーションアドバンテージ：小型、高速、総所有コストが低い、オープンソース。複数のオペレーティン...

Vue における $router と $route の違いの詳細な説明

通常、vue プロジェクトではルーティングを使用します。vue-router は vue.js の公...