Question

我需要在某些其他JavaScript文件之后包含JavaScript文件。通常，我只需使用以下语法将其包含在XML文件中：

<action method="addJs"><script>myfile.js</script></action>

或

<action method="addItem"><type>js</type><name>myfile.js</name></action>

按照正确的顺序，所以文件按我想要的方式包含在内。

关键是，我不知道有多少次我要包含我的文件。为了更具特色，我试图在jquery * .js文件的每个实例之后包含一个带有jQuery.noConflict（）的文件。我正在开发的网站仍处于开发阶段，可能仍会添加一些新的扩展，其中包括他们自己的jquery库（我可能甚至都不知道，因为我不是唯一一个从事该项目的人）。

在前端渲染布局时是否有包含js文件的事件，或者有一些方法我可以重写以达到预期的效果？

Answer 1

在每次包含脚本Y之后添加脚本X的唯一方法是修改添加的函数。

打开app / code / core / Mage / Page / Block / Html / Head.php，并修改函数getCssJsHtml。像这样：

public function getCssJsHtml()
{
    // separate items by types
    $lines  = array();
    foreach ($this->_data['items'] as $item) {
        if (!is_null($item['cond']) && !$this->getData($item['cond']) || !isset($item['name'])) {
            continue;
        }
        $if     = !empty($item['if']) ? $item['if'] : '';
        $params = !empty($item['params']) ? $item['params'] : '';
        switch ($item['type']) {
            case 'js':        // js/*.js
            case 'skin_js':   // skin/*/*.js
            case 'js_css':    // js/*.css
            case 'skin_css':  // skin/*/*.css
                $lines[$if][$item['type']][$params][$item['name']] = $item['name'];
                if(stripos($item['name'], 'jquery') !== false)$lines[$if][$item['type']][$params]['2_'.$item['name']] = $yourfilename;
                break;
            default:
                $this->_separateOtherHtmlHeadElements($lines, $if, $item['type'], $params, $item['name'], $item);
                break;
        }
    }
...

您看到我添加了一项检查，以查看正在添加的文件是否为jquery（stripos($item['name'], 'jquery') !== false），如果是，则在其后面添加一个新项目，路径为$yourfilename。

Magento应该已经具备了对皮肤文件进行排序的能力，但是a）依赖于每个提供排序属性的人，以及b）从一开始就没有真正正常工作。

Answer 2

HY，

Magento默认情况下不允许你这样做，为了能够按特定顺序添加文件（标题中的css或javascript），你必须自定义核心。

创建一个自定义模块，您可以在其中重写page / html_head块：

<?xml version="1.0"?>
<config>
    <modules>
        <Koncz_Utility>
            <version>1.0.0</version>
        </Koncz_Utility>
    </modules>
    <global>
        <blocks>
            <class>Koncz_Utility_Block</class>
            <page>
                <rewrite>
                    <html_head>Koncz_Utility_Block_Page_Html_Head</html_head>
                </rewrite>
            </page>          
        </blocks>
    </global>
</config>

并添加2个自定义函数： addItemFirst 和 addItemAfter

class Koncz_Utility_Block_Page_Html_Head extends Mage_Page_Block_Html_Head {
/*
 * Adds a head element into the first position, usage same as for addItem ;)
 */

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

/*
* Adds a custom css, or js file after the $type, if it was found! $type=js/jquery/jquery.js  <= or skin_js/path 
*/
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'])) :
        // get the position 
        $pos = 1;
        foreach ($this->_data['items'] as $key => $options) :
            if ($key == $after) :
                break;
            endif;
            $pos +=1;
        endforeach;

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

    endif;


    return $this;
}

}

在local.xml之后，您可以使用以下内容:(这将在第一个位置添加jquery.js，在第二个位置的jquery之后添加jquery.no-conflict.js）。 {{还值得一提的是你的skin_js文件将在js类型之后添加！所以使用js而不是skin_js作为基础js文件。

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>        
        <update handle="add_jquery_elegant_way" />
    </default>
    <add_jquery_elegant_way>
        <reference name="head">
            <action method="addItemFirst"><type>js</type><script>jquery/jquery.js</script></action>
            <action method="addItemAfter">
                <after>js/jquery/jquery.js</after>
                <type>js</type>
                <script>jquery/jquery.no-conflict.js</script>
            </action>
        </reference>
    </add_jquery_elegant_way>
</layout>

Answer 3

最简单的方法是编辑jquery * .js，并在文件末尾添加：

$jq=jQuery.noConflict();

那么你只需使用$ jq来访问jQuery对象，当包含jquery.js时，它会自动设置为noConflict模式。

Answer 4

您可以将指令手动放在header.phtml上。应用程序/设计/前端/ yoursite /路/模板/页/ HTML / header.phtml。你放在那里的内容在js include之后转到html。

Magento：如何在某些其他JS文件之后自动添加JS文件？

4 个答案: