using replaceWith on window title depending on browser

StackOverflow https://stackoverflow.com/questions/17120221

Question

I have some neat code that displays one <title> for a couple seconds after loading, then replaces it with a different <title>. The effect we are trying to achieve doesn't work in some versions of Safari or on iPad, so I want to check for Safari--and if the browser is Safari, then cancel the effect. What we have at the moment does not work--I am pretty sure the problem is in the safariFix function but am still a noob and not sure what's wrong:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uppagus</title>
<link rel="stylesheet" type="text/css" href="uppagusSTYLE.css" />
<link rel= "shortcut icon" media="all" type="image/x-icon" href="http://www.uppagus.com/favicon.ico" /> 
<link rel= "icon" media="all" type="image/vnd.microsoft.icon" href="http://uppagus.com/favicon.ico" />
<meta http-equiv="Page-Exit" content="revealTrans(Duration=2.0,Transition=23)">
<script src="jquery.min.js"></script>
<script>
  var isSafari;
  var ua = navigator.userAgent.toLowerCase(); 
  if(ua.indexOf('safari') != -1) { 
    if(ua.indexOf('chrome') > -1) {
      var isSafari = false;
    } else {
      var isSafari = true;
      safariFix();
    }
  } else {
    isSafari = false;
  }

  function safariFix() {
    $(function() {
      $('#googleFix').replaceWith('<script id="safariFix">function updateTitle() { document.getElementsByTagName("title")[0].innerHTML = "Uppagus";</script>');
    });
  }
</script>
<script id="googleFix">
function updateTitle() {
    setTimeout(function() {
        document.getElementsByTagName('title')[0].innerHTML = 'ppagus';
    }, 2000);
}
</script>

...
</head>
Was it helpful?

Solution

Script blocks are executed top to bottom as the browser encounters them while parsing the document. So you can't use code in the first script to manipulate any elements after that script. You are trying to replace a script element that appears after.

But why try to replace the script at all? Why not just put the logic in the script:

var ua = navigator.userAgent.toLowerCase();
var isSafari = ua.indexOf('safari') != -1 && ua.indexOf('chrome') == -1;

function updateTitle() {
    if (isSafari) {
        document.getElementsByTagName("title")[0].innerHTML = "Uppagus";
    } else {
        setTimeout(function() {
            document.getElementsByTagName('title')[0].innerHTML = 'ppagus';
        }, 2000);
    }
}

(Note also that your nested if/else structure is more complicated than necessary.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top