Javascript：如何在代码块之间传输变量？

Question

I am using Mautic which is an email newsletter software. Users enter their details for the newsletter via HTML landing pages that contains a simple HTML form.

This JS code allows Mautic to process the data from the HTML landing page. It is placed right before the closing body tag of my HTML page:

Mautic Code Block

<script>
    (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
        m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://myurl/mtc.js','mt');
       mt('send', 'pageview', {'tags':'landing-page-name'});

</script>

The last line 'tags':'landing-page-name' tells Mautic from which landing page the inputted data has come from. At the moment, landing-page-name has to be hardcoded in. I would prefer it if landing-page-name could be dynamically replaced with the file name of the HTML page.

On my HTML page, I already have a Javascript block that extracts the file name of the current HTML page and inserts it into a field on my Mautic form (on the HTML landing page). It assigns the name of the HTML page to a variable called val .

HTML Name Code Block

<script>
    window.onload = function() {
        let val = location.pathname.split('/').pop().replace('.html', '');
        val = val.replace(/-/g, ' ');
        val = val.replace(/(^\w{1})|(\s{1}\w{1})/g, match => match.toUpperCase());
        document.getElementById('mauticform_input_genericcouponclub_book_purchased').value = val;
        document.getElementById('mauticform_genericcouponclub_book_purchased').style.display = "none";
    }
</script>  

This code block is directly placed above the Mautic Code Block.

How can I pass the val variable into the Mautic Code Block, so I can use in the 'tags': part rather than having to hardcode the name?

Answer 1

Add filename to global/window object. Access the same variable in other functions.

Make sure you wrap second function(consumer) in windows.load as well because file name will be undefined before that. Alternatively you can have a fallback name.

 <script> window.onload = function() { let val = location.pathname.split('/').pop().replace('.html', ''); val = val.replace(/-/g, ' '); val = val.replace(/(^\\w{1})|(\\s{1}\\w{1})/g, match => match.toUpperCase()); document.getElementById('mauticform_input_genericcouponclub_book_purchased').value = val; document.getElementById('mauticform_genericcouponclub_book_purchased').style.display = "none"; // attach name to window/global object window.htmlFileName = val; } </script> ----------------------- <script> window.onload = function() { var fileName = window.htmlFileName || 'landing-page-name' (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n; w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t), m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m) })(window,document,'script','https://myurl/mtc.js','mt'); mt('send', 'pageview', {'tags': fileName }); } </script>