Magento 2: How to load my custom js file after footer?

Question

JS File Path: web->js->swap.js

default_head_block.xml

    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Text" name="swapjs">
            <arguments>
                <argument name="text" xsi:type="string"><![CDATA[<script type="text/javascript" src="js/swap.js"></script>]]></argument>
            </arguments>
        </block>
    </referenceContainer>

File path not found 404 Error. Please help me to solve this issue.

Answer 1

Try Below way..

You can do it with layout

    <referenceContainer name="before.body.end">
        <block class="\Magento\Framework\View\Element\Template" template="You_Module::js.phtml" name="module_js"/>
    </referenceContainer>

and in js.phtml

<scrip src="example.com/jp2/test.js" />

Or

<reference name="before_body_end">
        <block type="core/text" name="new-descriptive-name">
        <action method="setText">
            <text><![CDATA[<script type="text/javascript" src="http://www.mywebsite.com/myfolder/my-javascript.min.js"></script></text>
        </action>
        </block>
</reference>

Answer 2

Add an external JS in the following way :

Try this,

Add your custom js in the following path.

app/design/frontend/Vendor/theme-name/web/js/nameofjs.js

then you need to add requirejs-config.js to the following path.

app/design/frontend/Vendor/theme-name/requirejs-config.js

then add the following code in it

 var config = {
    paths: {            
            'your_js_name' : 'js/nameofjs', 
        },                                                                
    shim: {
    'your_js_name': {
        deps: ['jquery']
    },
  }
};

and add the below code to load custom js, In your case it would be footer.phtml in Magento_Theme folder on your theme

app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/footer.phtml

<script>
require(['jquery','your_js_name'],function($) {
$(window).load(function () {
     /*alert('load from external jquery');*/
});});
</script>

This would trigger the JS after footer is rendered. Hope this helps.