javascript - 別の.jsファイルを介してまだロードされていない場合は、外部.jsファイルをインポート/プルインします

Question

自動生成された.jsファイルを変更して、特定の外部ファイルがロードされているかどうかを照会し、ロードされていない場合はファイルをロードしようとしています。

具体的には、TumultHypeによって生成された一連のドキュメントを使用しています。アプリケーションは一連の.jsファイルを生成します。ただし、結果の埋め込みコードの完全なレスポンシブスケーリングを可能にする機能は含まれていません。

Tumult Hypeには、 http：//hype.desk.com/customer/portal/articles/259191-response-size-for-your-project-resizing-your-document-のサポートナレッジベースで定義されているソリューションがあります。to-fit-in-a-window-or-elementは、jQueryをロードし、ドキュメントの先頭に次のスクリプトを追加することを推奨します。

<script type="text/javascript" language="javascript">
var alsoenlarge = true;
$(function(){
  if(isScalePossible()){
    $('body').css({overflow:'hidden'}); //no scroll bars
    $('#scalecontainer').css({position: 'absolute', margin: 0}); //centering by hand after resize

// Run scale function on start
    scaleSite();
    scaleSite();  

    // run scale function on browser resize
    $(window).resize(scaleSite);
  }
});
function scaleSite()
{
  windoww = $(window).width();
  windowh = $(window).height();
  sitew = $('#scalecontainer').width();
  siteh = $('#scalecontainer').height();
  f = windoww/sitew;
  f = windowh/siteh<f?windowh/siteh:f;
  if(!alsoenlarge && f>1) f = 1;
  $('#scalecontainer').css({
    "-moz-transform"    : "scale("+f+")",
    "-webkit-transform" : "scale("+f+")",
    "-ms-transform"     : "scale("+f+")",
    "-o-transform"      : "scale("+f+")",
    "transform"         : "scale("+f+")",
    "left"              : ((windoww-(sitew*f))/2)+"px",
    "top"               : ((windowh-(siteh*f))/2)+"px"
  });
}
function isScalePossible()
{
  can = 'MozTransform' in document.body.style;
  if(!can) can = 'webkitTransform' in document.body.style;
  if(!can) can = 'msTransform' in document.body.style;
  if(!can) can = 'OTransform' in document.body.style;
  if(!can) can = 'transform' in document.body.style;
  if(!can) can = 'Transform' in document.body.style;
  return can;
}
</script>

ただし、このコードはJoomla環境で使用され、サイト全体では必要ありませんが、特定のページでのみ必要になるため、明示的に必要な場合を除いて、スクリプトを呼び出さないことをお勧めします。

Hypeで生成されたコードにはいくつかの部分があります。

このようなhtmlがあります：

<!-- copy these lines to your document: -->
<div id="scaletest_hype_container" style="position:relative;overflow:hidden;width:1024px;height:800px;">
    <script type="text/javascript" charset="utf-8" src="scaletest_Resources/scaletest_hype_generated_script.js?29990"></script>
</div>
<!-- end copy -->

このhtmlは、という特定の.jsファイルをインポートしますscaletest_hype_generated_script.js（名前のscaletest部分が誇大広告ドキュメントから誇大広告ドキュメントに変わります）

次に、このドキュメントは、誇大広告ファイルがWebブラウザによってレンダリングされるために必要なすべてのリソースをロードします。

ファイルの25〜40行目にscaletest_hype_generated_script.jsは、呼び出された別の.jsファイルHYPE.jsがロードされているかどうかを確認し、ロードされていない場合はそのファイルをロードするためのクエリがあります。コードは次のとおりです。

// load HYPE.js if it hasn't been loaded yet
if(typeof HYPE_108 == "undefined") {
    if(typeof window.HYPE_108_DocumentsToLoad == "undefined") {
        window.HYPE_108_DocumentsToLoad = new Array();
        window.HYPE_108_DocumentsToLoad.push(HYPE_DocumentLoader);

        var headElement = document.getElementsByTagName('head')[0];
        var scriptElement = document.createElement('script');
        scriptElement.type= 'text/javascript';
        scriptElement.src = resourcesFolderName + '/' + 'HYPE.js?hype_version=108';
        headElement.appendChild(scriptElement);
    } else {
        window.HYPE_108_DocumentsToLoad.push(HYPE_DocumentLoader);
    }
    return;
}

上記のコードの直後に、このファイルに2つのクエリを追加します。

jQueryがロードされているかどうかをテストし、ロードされていない場合はjQueryをロードします
この投稿の冒頭に記載されているスクリプトがロードされているかどうかをテストし、ロードされていない場合はスクリプトをロードします。

次に、上記のスクリプトを外部の.jsファイルとして保存し、サイトのルートを基準にして.というディレクトリに配置し/hypeます。ファイルは呼び出されますscaleableHype.js

また、ファイルへのパスを変更したいと思いHYPE.jsます。サイトには何十もの誇大広告のアニメーションがあるため、同じファイルの複数のコピーを呼び出すのは冗長です。デフォルトでは、HYPE.jsファイルは各誇大広告コンテンツのリソースフォルダにあります。

私のディレクトリの現在の構造は次のとおりです。

/hype
  |-/resourceFolder1
  |--|--HYPE.js
  |--|--PIE.htc
  |--|--image1.jpg
  |--|--documentName1_hype_generated_script.js
  |-/resourceFolder2
  |--|--HYOE.js
  |--|--PIE.htc
  |--|--pic1.png
  |--|--documentName2_hype_generated_script.js

たとえば、スクリプトを使用して、ファイルの同じ（複数ではない）コピーをロードして、重複を排除したいとdocumentName1_hype_generated_script.js思いdocumentName2_hype_generated_script.jsますHYPE.js。

何かアドバイスをいただければ幸いです。ありがとう

score 1 · Accepted Answer

このコードを使用して、documentName1_hype_generated_script.jsとdocumentName2_hype_generated_script.jsが既に読み込まれていることを検出し、そうでない場合は読み込むことができます。

<?php
   if(!JFactory::getApplication()->get('HYPE')){
        JFactory::getApplication()->set('HYPE',true);
        $document =& JFactory::getDocument();
        $document->addScript(JURI::root() . "path/to/HYPE.js");
    }

    if(!JFactory::getApplication()->get('jquery')){
        JFactory::getApplication()->set('jquery',true);
        $document =& JFactory::getDocument();
        $document->addScript(JURI::root() . "path/to/jquery.js");
    }

    if(!JFactory::getApplication()->get('hypeScale')){
        JFactory::getApplication()->set('hypeScale',true);
        $document =& JFactory::getDocument();
        $document->addScript(JURI::root() . "path/to/hypeScale.js");
    }
?>

score 0 · Accepted Answer

スクリプトを実行する前に、jQueryが常にロードされていることを確認したいようです。もしそうなら、jQueryが利用できないかもしれないと心配しているすべての場所でスクリプトブロックの前にこれを含めてください：

<!-- note that we are specifying a version here, that may or may not meet your need -->
<script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"><\/script>')</script>
<!-- If you want to provide a version on your own server, you could do this instead -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>

ただし、代わりに、jQueryがまだロードされていない場合にスクリプトが実行されないようにしたい場合は、

<script type="text/javascript" language="javascript">
if (window.jQuery) {
    var alsoenlarge = true;
    $(function(){
      if(isScalePossible()){
        $('body').css({overflow:'hidden'}); //no scroll bars
        $('#scalecontainer').css({position: 'absolute', margin: 0}); //centering by hand after resize

    // Run scale function on start
        scaleSite();
        scaleSite();  

        // run scale function on browser resize
        $(window).resize(scaleSite);
      }
    });
    function scaleSite()
    {
      windoww = $(window).width();
      windowh = $(window).height();
      sitew = $('#scalecontainer').width();
      siteh = $('#scalecontainer').height();
      f = windoww/sitew;
      f = windowh/siteh<f?windowh/siteh:f;
      if(!alsoenlarge && f>1) f = 1;
      $('#scalecontainer').css({
        "-moz-transform"    : "scale("+f+")",
        "-webkit-transform" : "scale("+f+")",
        "-ms-transform"     : "scale("+f+")",
        "-o-transform"      : "scale("+f+")",
        "transform"         : "scale("+f+")",
        "left"              : ((windoww-(sitew*f))/2)+"px",
        "top"               : ((windowh-(siteh*f))/2)+"px"
      });
    }
    function isScalePossible()
    {
      can = 'MozTransform' in document.body.style;
      if(!can) can = 'webkitTransform' in document.body.style;
      if(!can) can = 'msTransform' in document.body.style;
      if(!can) can = 'OTransform' in document.body.style;
      if(!can) can = 'transform' in document.body.style;
      if(!can) can = 'Transform' in document.body.style;
      return can;
    }

}
</script>

javascript - 別の.jsファイルを介してまだロードされていない場合は、外部.jsファイルをインポート/プルインします

2 に答える 2

Related

Reference