我正在尝试修改自动生成的.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-generated代码有几个部分。
有这样的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部分从炒作文档变为炒作文档)
然后,此文档将加载由Web浏览器呈现的炒作文件所需的所有资源。
在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个附加查询:
然后我将上述脚本保存为外部.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
文件的相同(不是多个)副本,从而消除重复。
任何建议都将不胜感激。感谢
答案 0 :(得分: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");
}
?>
答案 1 :(得分:0)
听起来你想确保在运行脚本之前总是加载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>