Javascript 如果尚未通过另一个.js文件加载，则导入/拉入外部.js文件

我试图修改一个自动生成的.js文件，以查询某个外部文件是否已加载，如果未加载，则加载该文件

更具体地说，我正在处理由Turult炒作生成的一系列文档。应用程序生成一系列.js文件。但是，有一个功能没有包括在内，它允许对生成的嵌入式代码进行完全响应的扩展

Tumult Hype在其支持知识库中定义了一个解决方案，建议加载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>

我想做的是在上述代码之后立即向该文件添加两个附加查询：

测试以查看是否加载了jQuery，如果未加载，则加载jQuery

测试是否加载了本文开头提到的脚本，如果没有，则加载脚本

然后，我将上述脚本保存为一个外部.js文件，并将其相对于站点根目录放置在名为

/hype

的目录中。该文件将被称为

scaleableHype.js

另外，我想修改

HYPE.js

文件的路径。由于该站点上有几十个宣传动画，因此调用同一文件的多个副本是多余的。默认情况下，

HYPE.js

文件位于每个HYPE内容的资源文件夹中

我的目录的当前结构如下：

// 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;
}

/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\u hype\u生成的\u script.js

和

documentName2\u hype\u生成的\u script.js

加载相同（而不是多个）的

hype.js

文件副本，从而消除重复

---

如有任何建议，将不胜感激。谢谢

您可以尝试使用此代码检测已加载的documentName1\u hype\u生成的脚本.js和documentName2\u hype\u生成的脚本.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");
    }
?>

---

听起来您希望确保在运行脚本之前始终加载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>

window.jQuery | | document.write（“”）
window.jQuery | | document.write（“”）

但是，如果您只是想在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>

if（window.jQuery）{
var alsoenlarge=真；
$（函数（）{
如果（可能（））{
$（'body'）.css（{溢出：'hidden'}）；//没有滚动条
$（'#scalecontainer'）.css（{position:'absolute'，margin:0}）；//调整大小后手动居中
//启动时运行缩放功能
鳞片石（）；
鳞片石（）；
//在浏览器上运行缩放功能调整大小
$（窗口）。调整大小（缩放）；
}
});
函数scaleSite（）
{
windoww=$（window.width（）；
windowh=$（window.height（）；
sitew=$（'#scalecontainer'）.width（）；
siteh=$（'#scalecontainer'）.height（）；
f=窗口w/sitew；
f=windowh/siteh1）f=1；
$（'#scalecontainer'）.css({
“-moz变换”：“缩放（+f+”），
“-webkit转换”：“缩放（“+f+”），
“-ms变换”：“缩放（+f+”），
“-o变换”：“缩放（“+f+”），
“变换”：“比例（+f+”），
“左”：（（windoww-（sitew*f））/2）+“px”，
“顶部”：（（windowh-（siteh*f））/2）+“px”
});
}
函数（）是可能的
{
can='MozTransform'在document.body.style中；
如果在document.body.style中（！can）can='webkitttransform'；
如果在document.body.style中（！can）can='msTransform'；
如果在document.body.style中（！can）can='OTransform'；
如果在document.body.style中（！can）can='transform'；
如果在document.body.style中（！can）can='Transform'；
还可以；
}
}

尝试使用$doc=&JFactory:：getDocument（）$doc->addScript（“js的src”）；如果您加载了js，则此函数只会加载一次，不会再次加载。问题是，每个documentName\u hype\u生成的\u script.js都引用了hype.js文件的不同副本，该副本与documentName\u hype\u生成的\u script.js文件位于同一目录中。我需要首先修改所有文件以查找相同的HYPE.js文件。我问题的另一部分是扩展调用以加载另一个当前不存在的.js文件。该.js文件将包含本文tp处的脚本。您看过吗？@robertc yepnope.js似乎是一个很好的解决方案，但我仍然面临的问题是，如何修改多个

documentName\u hype\u生成的\u script.js

的代码，以共享相同的hype.js和PIE.htc，从而删除十几个冗余的重复文件，同样重要的是，通过测试将新的

scaleabhype.js

添加到数组中，以查看jQuery是否已经存在加载。我对编写/编辑javascript非常在行，没有一点牵手，我的脸都会塌下来。我已经将一组资源的完整源文件上传到了pastebin。如果您在访问我的粘贴库，您将看到5个文件。在copain.html文件中，第21-27行的代码被复制到Joomla文章中。该代码引用并加载copain_hype_生成的_script.js，该脚本在第25-40行验证hype.js文件是否已加载，如果未加载，则加载。我无法确定PIE.htc的加载位置。我想修改HYPE.js的路径，使其位于父目录中，并为jQuery和新的hypeScale.js文件.Hi-Lodder添加一个测试。反过来说。HTML加载

documentName1\u hype\u生成的\u script.js

。依次加载

HYPE.js

，它与

documentName1\u HYPE\u generated\u script.js

位于同一目录中。每个

documentName1\u hype\u生成的

都位于自己的目录中，有自己的

hype.js

和

PIE.htc副本<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>