将所有Javascript包括以前 </body>

magento.stackexchange https://magento.stackexchange.com/questions/355

题

任何人都不会知道如何有所有的Magento的JS脚本，例如标签 <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script> 呈现出前关闭 </body>?

我已经尝试过这一次，但我得到了一个错误我认为这是沿线的addJS方法不是提供我在哪里使用，在可能的参考脚注。

有帮助吗？

解决方案

这取决于您的要求。例如，最后，我被删除了所有原型脚本 Homepage 我没有遇到任何问题的Magento商店。但是正如我所说，这取决于您的主题，扩展等。

移动脚本：

在 page.xml 你的主题

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

并在以前插入以下内容：

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
   <action method="addJs"><script>your_script.js</script></action>
</block>

对于Magento 1.9，请使用以下方式：

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
       <action method="addItem"><type>skin_js</type><name>js/yourskinfile.js</name><params/></action>
    </block>

在app/design/frontend/[package]/[theme]/template/page/html/jsfooter.phtml中创建模板文件

<?php echo $this->getCssJsHtml() ?>

关闭之前，请在模板中添加下面 </body> 标签。

<?php echo $this->getChildHtml('jsfooter') ?>

其他提示

移动标签有两个问题。最大的问题是，出于某种原因，Magento注入了许多依赖原型的JS <body/> 标签。将脚本移至文档的末尾（尽管适用于加载时间），但会打破Magento中的许多页面。

另一个问题实际上是这样做。似乎没有 <move /> 标签或类似功能。我为创建的自定义脚本所做的就是添加这样的脚本。它更多余，但有效：

<block type="page/html_head" name="foot.scripts" template="page/template/foot-scripts.phtml">
    <action method="addJs"><script>jmax/global-min.js</script></action>
</block>

在Magento 1.x中，这是一个傻瓜的事。在Magento中的整个模板文件中乱扔了太多的内联脚本，如果您将Core JS文件转移到 <head>. 。在Magento 2中，这种情况可能会发生变化，但是随着Magento从原型迁移而跨越原型和JQuery。

对于其他脚本，您应该将它们放在 </body> 元素。我发现忽略Magento的 <action method="addJS|addItem"> XML并简单地为每个脚本创建一个新的模板文件，其中包括一个普通的HTML脚本参考，例如：

<script src="<?php echo $this->getSkinUrl('js/hobbiton.js'); ?>"></script>

然后，您可以在任何地方嵌入此模板文件（并且在控制订单之前/之后仍在使用）这样的文件：

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />

移动外部JavaScript到底是不够的，在大多数情况下。如果你使用任何模板与联JavaScript,就像默认的主题，将需要推迟执行这些直到所有依赖性(prototype.js,varien.js,...)都载入。

一个方法是，提取的所有内嵌的 <script> 元素从呈现的街区使用一个观察员 http_response_send_before 并将它们移动到结束的权利之后的外部脚本。而你在这，你可以将所有剧本的元素，不仅内联。这样可以节省你的麻烦移动它们通过的布局模式，这是明显不是旨在通过Magento.

汤姆罗伯特肖创建了一个扩展，不正是这一点，与一个单一的观察员，改变了响应HTML using regular expressions:https://github.com/bobbyshaw/magento-footer-js

他使用 core_block_abstract_to_html_after 事件，但只有采取行动如果目前的块根块。这意味着，观察员被称为更频繁，但它应利用框缓存在一定程度上。

我强烈建议使用MediaRox PagesPeed模块来帮助您优化JavaScript（和CSS）并改进Google PagesPagesPeed Insight排名。

它通过通过Magento解析HTML输出来进行起作用，然后在代码上执行剪切和粘贴操作，以将JavaScript移至HTML代码的底部。该过程很快，但最好与整页缓存结合使用以缓存HTML更改。

有关该模块如何工作的更多信息，并可以帮助您在此处提高PagesPeed等级：

http://blog.gaiterjones.com/magento-google-pages-pages-pages-jscsshtmlminify-optimisation/

对于Magento v1.6+（需要在较旧版本中进行测试）；

1-在 page/html/footer/extras.phtml 使用此内容：

<?php echo $this->getCssJsHtml() ?>

2-将此HTML节点添加到您的布局XML：

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3-就是这样！

由于此其他脚本的问题（在product/list.phtml中） <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script>我必须在页面末端移动一些JS。

我无法制作上述工作的工作，因此我找到了另一种实现方法：

我覆盖了 Mage/page/Block/Html/Footer.php controller 通过在相同的路径中重新创建它 app/local folder.

如果不存在，这是要创建的完整途径：

app/local/Mage/page/Block/Html/Footer.php

在此文件中，我添加了head.php的函数，可以在Magento Core（即Mage/Page/Block/Block/HTML/Head.php）的同一文件夹中找到。

您需要使其有效的功能是（显然是完整的功能，在这里我只是指出要保持简洁的名称）：

public function addItem($type, $name, $params=null, $if=null, $cond=null)
{...}

public function addJs($name, $params = "")
{...}

public function getCssJsHtml()
{...}

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{...}

protected function _separateOtherHtmlHeadElements(&$lines, $itemIf, $itemType, $itemParams, $itemName, $itemThe)
{...}

protected function _prepareOtherHtmlHeadElements($items)
{...}

然后，我添加到我的自定义（主题中的一个）页面/html/footer.phtml呼叫：

<?php echo $this->getCssJsHtml() ?>

最后，我现在可以通过在任何布局中添加JS 

<action method="addJs"><script>yourscript.js</script></action>
许可以下： CC-BY-SA 和 归因
scroll top