Question

我有一些整洁的代码，在加载后显示一个<title>几秒钟，然后用不同的<title>替换它。我们试图实现的效果在某些版本的Safari或iPad上不起作用，因此我想检查Safari - 如果浏览器是Safari，则取消效果。我们现在拥有的东西不起作用 - 我很确定问题出在safariFix函数中，但仍然是一个菜鸟，不知道出了什么问题：

<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>

Answer 1

当浏览器在解析文档时遇到它们时，脚本块从上到下执行。因此，您无法在第一个脚本中使用代码来操作该脚本之后的任何元素。您正在尝试替换之后出现的脚本元素。

但为什么要尝试更换脚本呢？为什么不把逻辑放在脚本中：

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); } }

（另请注意，嵌套的if / else结构比必要的更复杂。）

根据浏览器在窗口标题上使用replaceWith

1 个答案: