web-dev-qa-db-ja.com

フッターとカスタムスタイルにJavaScriptファイルを追加する

ページを高速にロードするには、コンポーネントとモジュールからページの最後にJSを挿入する必要があります。

スクリプトを宣言する次の方法は、フッターに配置するパラメーターがないため、スクリプトを下部に挿入するようには機能しません。

$rsws_document  = JFactory::getDocument(); 
$rsws_document->addScript();

それで、私の目的を達成する簡潔な方法は何ですか? joomlaがそのような機能を提供しない場合、ページの読み込み速度にとって重大な欠点となります。

また、モジュールからカスタムスタイルシートを追加して、同じモジュールがそのページで複数回追加しても、ページに1回だけ挿入されるようにしたい-

<style type="text/css"> .classname { color:red; }.....</style>

どうすればこれを達成できますか?

9
dev-m

JDocument-> addScript()には、スクリプトのロードを延期したり、非同期でロードしたりするオプションがあります。 APIドキュメントを参照してください: http://api.joomla.org/cms-3/classes/JDocumentHTML.html#method_addScript

これにより、ブラウザーはプロセスの後の方でスクリプトをロードできるようになり、ページロード時間の助けになります。

ページの下部にスクリプトをロードするAPIはありません。それが必要な場合は、サードパーティの拡張機能を使用するか、テンプレートに直接追加する必要があります。

6
Bakual

現在、フッターにスクリプトを追加する方法はありません。ただし、出力を取得し、フッターなどの適切な名前のタグを検索し、str_replaceを使用してコードに追加するプラグインを作成できます。

しかし、これらの拡張機能を使用してそれを実現できます。

  1. ScriptsDown
  2. JCH最適化

また、私は1つの方法を見つけました。私はコアコードをハックしないことを好みますが、それは現時点で思いつくことができる最高のものです。

このリンクを確認してください- Javascriptファイルはフッターに含まれます

私はそれが他の人を助けることを願っています:)

2
Joomler

今のところ、ページの下部にスクリプトを読み込むオプションはないと思います。

2番目の質問では、静的なブール値プロパティを使用して、CSSが初めてレンダリングされるときにtrueに設定できます。次のモジュールインスタンスでは、このプロパティをテストして、CSSを追加する必要があるかどうかを判断します。

この静的プロパティを追加するのに適した場所は、モジュールヘルパークラスでしょう。

よろしく、

2
Pep Lainez

「空白モジュール」と呼ばれるモジュールを使用します。これにより、任意のスクリプト(PHP、Java、CSS、HTMLなど)を配置し、ロードする場所(ヘッド、ボディ、エンドオブボディなど)を選択できます。

それは無料で、私はそれが完全に便利であるとわかりました: http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/3668

スクリプトをから本文の下に移動するには、もう少し作業が必要です。これを使って:

テンプレートに含める:

 <?php 
 $ head = $ doc-> getHeadData(); 
 //スクリプトを削除
 unset($ doc-> _ scripts [JURI :: root (true)。 '/media/system/js/mootools-more.js']); 
?>

ヘッドから削除する必要のあるスクリプトごとに「unset」行を1つ追加します。次に、下部にある空のモジュールロードに追加します(デバッグ位置?)。さらに、空のモジュールを複数作成した場合、必要な場所にしかスクリプトをロードできないことになります(たとえば、motools専用のモジュールインスタンス、特定のページにのみロードするなど)。

スタイルの場合は、空のモジュールを使用することもできます。

これがお役に立てば幸いです。

$ document-> addScript()は常にヘッダーセクションのタグの前にスクリプトを追加します。したがって、ページの下部にスクリプトファイルをロードする場合は、単に<script src="{pathtojacvascriptfile}"></script>を使用して、そのファイルにjsを含める必要があります。

これが役立つことを願っています

2
user5491

私はまだ一人で試していません。 HTMLを表示せず、スクリプトとスタイルを出力するだけのモジュールを作成できますが、他のモジュールが表示されているページの一番下のモジュール位置にあります。

0
Hung Tran