如何在所有其他包含的JS文件的末尾加载特定的JS?


8

我有一个特定的fancybox.js文件,我想在local.xml中包含的所有JS文件的末尾加载

如果可以更改加载顺序,那么如何在末尾加载(包括)JS文件?

谢谢。

Answers:


12

您可以通过使用具有name属性的params元素对layout.xml中的skinjs文件进行排序,如下所示:-

<action method="addJs"><!-- this will be shown second -->
    <script>prototype/javascript1.js</script>
    <params><![CDATA[name="js002_second"]]></params>
</action>
<action method="addJs"><!-- this will be shown first -->
    <script>prototype/javascript2.js</script>
    <params><![CDATA[name="js001_first"]]></params>
</action>

很好...我每天都学到新东西。
Marius

如果我在所有JS文件的末尾仅包含一个JS,那么上述方法将如何工作?
2014年

尝试<params><![CDATA[name="zjs_last"]]></params>看看会发生什么(我不是100%确定)。如果还没有加载,请向后报告。
zigojacko 2014年

没有它不起作用.. ::(
Mark

@Mark-嗯,好吧,我想每个js调用都需要一个具有name属性的params元素,或者您可以尝试进行修改,以便可以包括排序顺序,或者不能仅将fancybox js调用放在所有其他元素之后?
zigojacko 2014年

2

我不认为您可以为添加的js文件指定排序顺序(显然您可以看到@zigojacko提供的答案),但是我认为您可以做一些不同的事情,购买将子块添加到head块中。
head块的所有子代均在js和css元素之后呈现。

这就是您所需要的。

将此添加到您的布局文件之一。

<reference name="head">
    <block type="core/template" name="fancy" as="fancy" template="fancybox/fancybox.phtml" />
</reference>

然后创建app/design/frontend/{package}/{theme}/template/fancybox/fancybox.phtml具有以下内容的文件。

<script type="text/javascript" src="<?php echo Mage::getBaseUrl('js').'/fancybox.js'?>"></script>

1

我知道这个问题很旧,但这是使用简单的自定义模块(经过测试)订购资产文件的简单方法:

创建

app/etc/modules/Company_ReorderAssets.xml

并插入:

 <?xml version="1.0"?>

 <config>

     <modules>

         <Company_ReorderAssets>

             <active>true</active>

             <codePool>local</codePool>

         </Company_ReorderAssets>

     </modules>

 </config>

创建app/code/local/Company/ReorderAssets/etc/config.xml并插入:

<?xml version="1.0"?>

 <config>

     <modules>

         <Company_ReorderAssets>

             <version>1.0.0</version>

         </Company_ReorderAssets>

     </modules>

     <global>

         <blocks>

             <class>Company_ReorderAssets_Block</class>

             <page>

                 <rewrite>

                     <html_head>Company_ReorderAssets_Block_Page_Html_Head</html_head>

                 </rewrite>

             </page>          

         </blocks>

     </global>

 </config>

创建ReorderAssets/Block/Page/Html/Head.php并插入:

<?php



 class Company_ReorderAssets_Block_Page_Html_Head extends Mage_Page_Block_Html_Head {



    public function addItemFirst($type, $name, $params = null, $if = null, $cond = null) {



        if ($type === 'skin_css' && empty($params)) {

            $params = 'media="all"';

        }



        $firstElement = array();

        $firstElement[$type . '/' . $name] = array(

            'type' => $type,

            'name' => $name,

            'params' => $params,

            'if' => $if,

            'cond' => $cond,

        );



        $this->_data['items'] = array_merge($firstElement, $this->_data['items']);



        return $this;



    }



    public function addItemAfter($after, $type, $name, $params = null, $if = null, $cond = null) {



        if ($type === 'skin_css' && empty($params)) {

            $params = 'media="all"';

        }



        $firstElement = array();

        $firstElement[$type . '/' . $name] = array(

            'type' => $type,

            'name' => $name,

            'params' => $params,

            'if' => $if,

            'cond' => $cond,

        );



        if (array_key_exists($after, $this->_data['items'])){



            $pos = 1;

            foreach ($this->_data['items'] as $key => $options){

                if ($key == $after) :

                    break;

                endif;

                $pos +=1;

            }



            array_splice($this->_data['items'], $pos, 0, $firstElement);



        }



        return $this;



    }
 }

在这里,我们创造我们的功能addItemFirstaddItemAfter可以像这样使用(任何layout.xml内)。

layout.xml的示例:

 <?xml version="1.0"?>

 <layout version="0.1.0">

    <default>

         <reference name="head">

            <action method="addItemFirst"><type>skin_js</type><script>js/jquery.js</script></action>

            <action method="addItemAfter">

                <after>skin_js/js/jquery.js</after>

                <type>skin_js</type>

                <script>custom_folder/javascript.js</script>

            </action>

            <action method="addItemAfter">

                <after>skin_js/js/jquery.js</after>

                <type>skin_js</type>

                <script>custom_folder/another_javascript.js</script>

            </action>

         </reference>

    </default>

 </layout>

请注意路径内的skin_js。

特别感谢Koncz Szabolcs。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.