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


9

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

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

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

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

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

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

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


1
質問は1つのトピックに限定する必要があります。ここで2つの質問があります。
バクーアル2014

1
役立つかもしれない拡張機能があります:extensions.joomla.org/extension/scriptsdown
noiragneau

回答:


6

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

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

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


はい、私はそれを知っていました。しかし、ワードプレスは、スクリプトとカスタムCSSの両方の場合に私の質問に関するこれらの種類の機能を持っています。したがって、Joomlaはそれを追加する必要があります。
dev-m

そのようなものを追加するための議論がありました。個人的には、遅延/非同期よりも一番下に追加する利点がわかりません。
バクーアル2014

2

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

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

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

よろしく、


2

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

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


2

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

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

  1. ScriptsDown
  2. JCH最適化

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

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

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


2

「空白モジュール」と呼ばれるモジュールを使用します。これにより、任意のスクリプト(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専用のモジュールインスタンス、特定のページにのみロードするなど)。

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

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


0

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.