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

Question

我正在尝试修改自动生成的 .js 文件以查询是否加载了某个外部文件，如果没有，则加载该文件。

更具体地说，我正在处理由 Tumult Hype 生成的一系列文档。该应用程序生成一系列 .js 文件。但是，有一项未包含的功能允许对生成的嵌入式代码进行完全响应式缩放。

Tumult Hype 在其支持知识库 http://hype.desk.com/customer/portal/articles/259191-responsive-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 导入一个名为 scaletest_hype_generated_script.js 的特定 .js 文件(名称的 scaletest 部分从炒作文档变为炒作文档)

然后该文档加载网络浏览器呈现炒作文件所需的所有资源。

scaletest_hype_generated_script.js 文件的第 25-40 行是一个查询，用于验证是否加载了另一个名为 HYPE.js 的 .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 个额外的查询:

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

然后我会将上述脚本另存为外部 .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< 的相同(不是多个)副本 文件，从而消除了重复。

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

Answer 1

您可以尝试使用此代码来检测 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");
    }
?>