将外部 JavaScript 文件添加到 Magento答案

【问题标题】：Adding external JavaScript file to Magento将外部 JavaScript 文件添加到 Magento
【发布时间】：2011-01-11 06:25:30
【问题描述】：

如何将外部 JavaScript 文件添加到 Magento，使其代码包含在每个前端页面中？

【问题讨论】：

标签： javascript magento

【解决方案1】：

要添加外部 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>

【讨论】：

这是最简单的添加外部JS的方法：urltoexternalfile.js"></script>]]>
请注意，如果您想动态地向头部添加任何内容，您可以在没有的情况下将其添加到布局中，然后在控制器中加载块并在那里调用 setText。跨度>
如果我在特定的 magento 页面中包含外部 js，我会使用这种方法。 :D
不幸的是，Magento 1.x 没有针对外部 JS 的开箱即用解决方案（使用核心/文本除外）。在 M2 中，我们确实有，如下所述：magenteiro.com/blog/magento-2/…

【解决方案2】：

将 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');
这是在外部 javascript url 前面添加 baseurl。有什么办法解决这个问题吗？
@OSdave "你也可以在你的块中这样做：" 哪些块类型支持这个？扩展 Mage_Core_Block_Template 不起作用。谢谢
@Jongosi 我很确定扩展 Mage_Core_Block_Template 的块确实支持这一点，也许你的代码中的其他地方有错误
实际上这不是问题的答案，这不会将外部 JavaScript 文件添加到 Magento 商店。将 JS 文件复制到 js/ 文件夹基本上可以防止您使用托管流行脚本的 Google CDN/其他流行 CDN。检查 Gaurav Tewari 答案以添加外部文件。

【解决方案3】：

您可以使用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>

Here你可以找到更多信息。

【讨论】：

【解决方案4】：

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

【讨论】：

@Obsidian：为什么要删除 CDATA 部分？这一定破坏了文本内容。 vikas：您的答案缺少介绍性句子，根本不清楚 XML 应该做什么，缺少解释。

【解决方案5】：

创建/编辑以下内容：

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>

【讨论】：

这会产生
同样适用于我：duntuk.com/magento-how-add-external-stylesheet-or-javascript
link rel 将不包含 javascript.. 所以 addLinkRel 不适用于 JS。我会使用类似 cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/…" defer/>]]>

【解决方案6】：

在 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>

【讨论】：

【解决方案7】：

方法“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>

【讨论】：

【解决方案8】：

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

这是我的解决方案：

    /** @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的观察者中做到了这一点

【讨论】：