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の使い方を詳しく説明します

推薦する

Linux で boost.python を使用して C++ 動的ライブラリを呼び出す方法

序文最近、C++ 動的ライブラリをテストするためにロボット フレームワークを使い始めました。ロボット...

Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル

目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...

Vue がコンポーネント通信を実装する 8 つの例

目次1. Props 親コンポーネント ---> 子コンポーネント通信2. $emit 子コン...

MySQL binlog を開く手順

Binlog は、MySQL データの変更を記録するために使用されるバイナリ ログ ファイルです。B...

M1 チップに MySQL 8.0 データベースをインストールする方法 (画像とテキスト)

1. ダウンロードまず、MySQLの国内ミラーをお勧めします。特に速いわけではありませんが、それで...

MySql マスタースレーブレプリケーションの実装原理と構成

データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...

非常に実用的なMySQL関数の包括的な概要、詳細な例の分析チュートリアル

目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...

JS+Canvas が抽選ホイールを引く

この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...

HTML の隠しフィールドの紹介と例

基本的な構文: <input type="hidden" name=&qu...

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...

JavaScript のディープコピーの落とし穴

序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいです...

Webpack-cliが正常にインストールされたら、詳細についてはwebpack -vエラーケースを確認してください。

目次質問1. webpack webpack-cliをインストールする2. webpackのバージョ...

CentOS サーバーのセキュリティ構成戦略

最近、ブルートフォース攻撃によるサーバのクラッキングが頻発しています。侵入行為を大まかに分析し、よく...

Vue3はサイドナビゲーションテキストスケルトン効果コンポーネントをカプセル化します

Vue3プロジェクトのカプセル化サイドナビゲーションテキストスケルトン効果コンポーネント-グローバル...

Windows で virtualenv を使用して仮想環境を作成する方法 (2 つの方法)

オペレーティング システム: windows10_x64 Python バージョン: 3.6.8仮想...