将外部 JavaScript 文件添加到 Magento
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4654822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding external JavaScript file to Magento
提问by Magento Kid
How to add external JavaScript file to Magento, so it's code would be included on every frontend page?
如何将外部 JavaScript 文件添加到 Magento，使其代码包含在每个前端页面中？
回答by Gaurav Tewari
To add an external JS without any problem use this:
要毫无问题地添加外部 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>
回答by OSdave
Put the JS file somewhere into the "js" folder, and in the XML layout you can include it with:
将 JS 文件放入“js”文件夹中的某个位置，然后在 XML 布局中，您可以将其包含在：
<reference name="head">
<action method="addJs"><script>folder/file.js</script></action>
</reference>
Hope that helps.
希望有帮助。
Edit:You can also do it in your block:
编辑：您也可以在您的区块中进行：
protected function _prepareLayout()
{
$this->getLayout()->getBlock('head')->addJs('path/from/js/folder/to/your/file.js');
return parent::_prepareLayout();
}
回答by Ricardo Martins
You can use Inchoo_Xternalextension. So you can do something like this:
您可以使用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>
Hereyou can find more info about this.
在这里你可以找到更多关于这方面的信息。
回答by vikas
<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>
回答by Rafael Corrêa Gomes
Create/edit the following:
创建/编辑以下内容：
app/design/frontend/PATH/TO/YOURTHEME/layout/local.xml
Make it look like so--should be self explanatory...
让它看起来像这样 - 应该是不言自明的......
<!-- 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>
回答by Boss COTIGA
Work fine with 2.1.7
使用 2.1.7 正常工作
app/design/frontend/PATH/TO/YOURTHEME/layout/default_head_blocks.xml
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>
回答by Mikael
None of the methods above worked for me because the script was not hosted on the same domain as the website and had to be controlled using a config variable.
上述方法都不适合我，因为脚本与网站不在同一域中，必须使用配置变量进行控制。
This was my solution:
这是我的解决方案：
/** @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);
I did this in an observer observing controller_action_layout_generate_blocks_after
我在观察者观察中做到了这一点 controller_action_layout_generate_blocks_after
回答by Evo clamcase2
Method "addItem" and type "link_rel" to add external css file from page.xml
方法“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>
