logo标签列表

向Magento添加外部JavaScript文件

javascriptmagento
38
如何将外部JavaScript文件添加到Magento中，以便其代码将包含在每个前端页面中？
8个回答
80

为了无误地添加外部JS，请使用以下代码：

<reference name="head">
   <block type="core/text" name="google.cdn.jquery">
      <action method="setText">
        <text>
           <![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
        </text>
      </action>
   </block>
</reference>
2
这是添加外部JS最简单的方法：<reference name="head"><block type="core/text" name="external_js"> <action method="setText"><text><![CDATA[<script type="text/javascript" src="https://urltoexternalfile.js"></script>]]> </text> </action> </block> </reference> - Gaurav Tewari
请注意，如果您想动态地向头部添加任何内容，可以在布局中添加而不需要使用<action>，然后在控制器中加载块并在那里调用setText。 - Darth Egregious
这个方法是我在特定的Magento页面中包含外部js时使用的。 :D - jehzlau
不幸的是，Magento 1.x没有针对外部JS的开箱即用解决方案（除非使用core/text）。在M2中，我们有一个解决方案，如此处所述：https://magenteiro.com/blog/magento-2/como-adicionar-js-externo-no-magento-2/ - Ricardo Martins
42

将JS文件放置在“js”文件夹中，然后在XML布局中您可以使用以下内容进行包含：

    <reference name="head">
        <action method="addJs"><script>folder/file.js</script></action>
    </reference>
希望能帮到你。 编辑：你也可以在你的代码块中实现：
    protected function _prepareLayout()
    {
        $this->getLayout()->getBlock('head')->addJs('path/from/js/folder/to/your/file.js');

        return parent::_prepareLayout();
    }
我们能否在Magento的块中添加JS或CSS，例如$this->addJs('some.js');？ - Imran Khan
5
这是在外部JavaScript URL前添加baseurl。有解决方法吗？ - Mukesh Chapagain
@Jongosi 我非常确定扩展Mage_Core_Block_Template的块支持此功能，也许您的代码中有其他错误。 - OSdave
9
实际上，这不是答案，它没有将外部JavaScript文件添加到Magento商店。将JS文件复制到js /文件夹基本上会防止您使用Google CDN /其他流行CDN来托管流行脚本。请查看Gaurav Tewari的回答以添加外部文件。 - matt
@OSdave 如果我想在模块的后端页面中添加CSS和JS怎么办？我的意思是我想在Magento后端添加自定义js和CSS文件。 - Vipul Hadiya
显示剩余2条评论
6
你可以使用Inchoo_Xternal扩展程序。这样，你就可以像这样做：
<layout version="0.1.0">
    <default>
            <reference name="head">
                <action method="addItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
                <action method="addItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
                <action method="addExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
                <action method="addExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
            </reference>
    </default>
    <catalog_product_view>
        <reference name="head">
                <action method="removeItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
                <action method="removeItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
                <action method="removeExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
                <action method="removeExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
            </reference>
    </catalog_product_view>
</layout>

这里可以找到更多关于此事的信息。

5
<block type="core/text" name="jquery">
    <action method="setText">
        <text>
            <![CDATA[<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js?ver=3.9.2"></script>]]>
        </text>
    </action>
</block>
2
@Obsidian：你为什么删除了CDATA部分？这一定破坏了文本内容。vikas: 你的回答缺少一个引言句，不清楚XML的作用，需要解释。 - hakre
3

创建/编辑以下内容：

app/design/frontend/PATH/TO/YOURTHEME/layout/local.xml

让它看起来像这样——应该不用解释了…
<!-- Add an EXTERNAL stylesheets  -->
<action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400,300,700|Open+Sans:300italic,400,300</href></action>

<!--  Add an EXTERNAL javascript  -->
<action method="addLinkRel"><rel>text/javascript</rel><href>https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js</href></action>

<!-- Add stylesheets from your local theme directory located in skin/frontend/ -->
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

<!-- Add javascript from your local theme directory located in skin/frontend/ -->
<action method="addJs"><script>bootstrap.min.js</script></action>
3
这会产生 <link rel="text/javascript" href="//js.js">。 - pankijs
1
这个对我也起作用了：http://duntuk.com/magento-how-add-external-stylesheet-or-javascript - itsazzad
链接关系不包括JavaScript，因此addLinkRel对JS无效。我会选择类似于<reference name="head"><block type="core/text" name="jquery.mask"><action method="setText"><text><![CDATA[<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js" defer/>]]></text></action></block></reference>的方式。 - Ricardo Martins
1
工作正常，适用于2.1.7版本。

app/design/frontend/PATH/TO/YOURTHEME/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/bootstrap.min.css" />
        <css src="css/YOUR.css" order="99" />
        <link src="js/jquery.js" />
        <link src="js/bootstrap.js" />
        <link src="js/YOUR.js" />
    </head>
</page>
0

使用方法 "addItem" 和类型 "link_rel"，从 page.xml 添加外部 css 文件

<action method="addItem"><type>link_rel</type>  <name>//vjs.zencdn.net/4.12/video-js.css</name><params>rel="stylesheet"</params></action>
0

以上的方法都不适用于我，因为脚本没有托管在与网站相同的域上，必须使用配置变量进行控制。

这是我的解决方案：

    /** @var Mage_Core_Model_Layout $layout */
    $layout = Mage::getSingleton('core/layout');

    /** @var Mage_Core_Block_Text $block */
    $block = $layout->createBlock('Mage_Core_Block_Text', $name);

    $block->setText('<script type="text/javascript" src="'.$url.'"></script>');

    /** @var Mage_Page_Block_Html_Head $head */
    $head = $layout->getBlock('head');

    $head->append($block);

我在观察者中观察到controller_action_layout_generate_blocks_after

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接