Change script code on URL hash change

Question

I have a script, as is shown in the following example:

<script type="text/javascript">
var _myplug = _myplug || {};
_myplug.key = '12e9u349u43098j8r940rjciocjo';
_myplug.renderTo = '';
window.myplug||(function(d) {
    var s,c,o=myplug=function(){ o._.push(arguments)};o._=[];
    s=d.getElementsByTagName('script')[0];c=d.createElement('script');
    c.type='text/javascript';c.charset='utf-8';c.async=true;
    c.src='js/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>

I know exactly what change I have to do, but I have no idea how to accomplish this in coding language.

What I need to do is:

When the URL hash changes to "triggerURL" then _myplug.renderTo = 'happy';
When URL hash changes again to anything else than "triggerURL" then _myplug.renderTo = ''

This because the URL can change anytime (without leaving the page) and every time the above hash changes happen, the other described changes need to be done some way.

Anyone with a solution..... Thanks a LOT!

Dmitriy · Accepted Answer · 2016-03-02 23:23:08Z

1

<script type="text/javascript">
var _myplug = _myplug || {};
_myplug.key = '12e9u349u43098j8r940rjciocjo';
_myplug.renderTo = '';
window.myplug||(function(d) {
    var s,c,o=myplug=function(){ o._.push(arguments)};o._=[];
    s=d.getElementsByTagName('script')[0];c=d.createElement('script');
    c.type='text/javascript';c.charset='utf-8';c.async=true;
    c.src='js/loader.js?';s.parentNode.insertBefore(c,s);
})(document);    

function changeHash () {
   var hash = (window.location.hash || '#').slice(1);
   if (hash === 'triggerURL') {
       _myplug.renderTo = 'happy';
   } else {
       _myplug.renderTo = '';
   }
}

changeHash(); // init 
window.addEventListener('hashchange', changeHash, false);
</script>

edited Mar 2, 2016 at 23:23

answered Mar 2, 2016 at 23:10

Dmitriy

3,76518 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cinzel Over a year ago

Thank you very much respondents, for your quick replies Excuse me for my "very good" script knowledge, but can anybody post the entire script? This because I have not enough knowledge to integrate the solutions into the existing script. Thank you. (@Dmitriy Loskutov, @ZachRabbit). There must be one place to learn it (I learn a lot here).

Cinzel Over a year ago

Wow it works. But only when I reload the page (it gets triggered on the right URL hash). Do you know how to let this work without page refresh, but whenever the specified hash changes appear, even without a page reload? That is the actual goal. Thank you.

Dmitriy Over a year ago

Does your _myplug support this feature(track hashchange)? In some cases you have to init _myplug.renderTo = "" before script is loaded. If your _myplug does not support it, so, probably, you don't need to track hashchange event at all.

Cinzel Over a year ago

Yes, I think this is the best way to prove that: When I reopen the page on the URL ending with #triggerURL then myplug appears in the element with the ID 'happy' (that is what _myplug.renderTo is for). When I reopen the page on the URL ending with any other hash, then myplug appears on the other place, not in the element with ID 'happy', so the myplug is doiing the job based on the URL hash, so your addition to my script code (that tracks hashchange) is working correctly. But some other thing needs to be added to tell the script not only on page load whether the hash = happy or not, but also..

Cinzel Over a year ago

In a nutshell: Currently the hash tracking works only when I reload the page, but I am searching for a way to also track hash changes that appear when the page is not reload. (I will delete my duplicate comment)

ZachRabbit · Accepted Answer · 2016-03-02 23:10:45Z

0

You can use the hashchange event on window to perform your changes. In modern browsers, it's as easy as this:

window.addEventListener('hashchange', function (ev) {
    if (window.location.hash === '#triggerURL') {
        // Your Code Here
    }
}, false)

You can find more information, as well as a polyfill for older browsers, on MDN.

answered Mar 2, 2016 at 23:10

ZachRabbit

5,1841 gold badge26 silver badges16 bronze badges

1 Comment

Cinzel Over a year ago

Thank you, it works (see further implementation of this as posted by @Dmitriy Loskutov. But it works only when I reload the page (it gets triggered on the right URL hash). Do you know how to let this work without page refresh, but whenever the specified hash changes appear, even without a page reload? Maybe I need to refire the script, as it does on reload? Thank you.

Collectives™ on Stack Overflow

Change script code on URL hash change

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related