Question

我的Razor视图中有以下脚本： -

if (document.getElementById("currentdate") != null && document.getElementById("currenttime") != null) {
        document.getElementById("currentdate").innerHTML = EMBEDformatAMPM();

我正在做的是下面的事情： -

由于currentdate & currenttime仅在用户通过身份验证时显示。因此，如果未显示该元素，getElementById.innerHTML将引发引用异常。这就是为什么我决定在设置.innerHTML之前检查这些元素是否存在。我的检查在IE和Chrome上运行良好，而在firefox上，即使当前日期和当前时间DOM元素存在，也不会显示当前日期和时间

..有人可以建议吗？

修改这是生成的HTML： -

<section id="login" class="navbar-search pull-right">
  <span class="username customTopNavText " style=" display:block; ">
      [<a href="/tms/Account/LogOff/" style="color:white"> Logout </a>]
      <i class="icon-user"></i> <strong >   </strong>
  </span>
  <div  class="customTopNavText" id="currentdate"></div>
  <div  class="customTopNavText" id="currenttime" ></div>   
      <form class="customSearch"method="GET" action="/tms/Home/Search">
          <input  class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "/tms/Home/AutoComplete" type="text" style="margin-top:8px"/><input type="submit" value="Search" class="btn" />
      </form>
</section>

<div class="top-nav nav-collapse">
    <ul class="nav">
        <li class="customTitle" style= "color:#f99406">TMS - Staging  </li>
        <li></li>
    </ul>
</div><!--/.nav-collapse -->

</div>
</div>

</div>

其中既有当前日期又有当前时间已存在，但未使用以下脚本设置其HTML： -

    var el = document.getElementById('currentdate');
    if (el != null) {
        //if (document.getElementById("currentdate") != null && document.getElementById("currenttime") != null) {
        document.getElementById("currentdate").innerHTML = EMBEDformatAMPM();
        var myVar = setInterval(function () { myTimer() }, 30000);

        function myTimer() {
            document.getElementById("currentdate").innerHTML = EMBEDformatAMPM();
        }
        function EMBEDformatAMPM() {
            var d = new Date(),
                minutes = d.getMinutes().toString().length == 1 ? '0' + d.getMinutes() : d.getMinutes(),
                hours = d.getHours().toString().length == 1 ? '0' + d.getHours() : d.getHours(),
                ampm = d.getHours() >= 12 ? 'pm' : 'am',
                months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            return days[d.getDay()] + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
        }
        document.getElementById("currenttime").innerHTML = EMBEDformatAMPM2();

        var myVar2 = setInterval(function () { myTimer2() }, 30000);
        function myTimer2() {
            document.getElementById("currenttime").innerHTML = EMBEDformatAMPM2();
        }
        function EMBEDformatAMPM2() {
            var d = new Date(),
                minutes = d.getMinutes().toString().length == 1 ? '0' + d.getMinutes() : d.getMinutes(),
                hours = d.getHours().toString().length == 1 ? '0' + d.getHours() : d.getHours(),
                ampm = d.getHours() >= 12 ? 'pm' : 'am',
                months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            return hours + ':' + minutes;
        }
    }

由于

Answer 1

Firefox通常会阻止在块中提升函数声明...您可以自己尝试一个简单的示例：

if (true) {
    execute();
    function execute() { alert("worked"); } 
}

上述内容适用于Chrome和IE，但不适用于FF（尽管存在错误）。尝试将EMBEDformatAMPM的声明放在if：

之外

function EMBEDformatAMPM() {
    var d = new Date(),
        minutes = d.getMinutes().toString().length == 1 ? '0' + d.getMinutes() : d.getMinutes(),
        hours = d.getHours().toString().length == 1 ? '0' + d.getHours() : d.getHours(),
        ampm = d.getHours() >= 12 ? 'pm' : 'am',
        months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    return days[d.getDay()] + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
}

var el = document.getElementById('currentdate'); 
if (el != null) {       
        el.innerHTML = EMBEDformatAMPM();
}

我可能会对FF扼流圈有点不公平 - 根据规范，块中唯一允许的是语句，而函数声明不是声明。

您可能还想转到code review，因为您的代码中有一些内容可以改进。

编辑（回复评论）

这不是Firefox的错误，因为根据规范，技术上不允许使用Firefox。 Chrome和IE通过对你想要的东西做出很好的猜测而更加宽容，但不能保证它在将来的版本中有效。

关于代码的改进，请查看此fiddle

// wrap in IIFE to avoid polluting global namespace.
(function () {
   // declare all our variables at the top of the function
    var currentDate = document.getElementById('currentdate'),
       currentTime = document.getElementById('currenttime'),
       updateTime,
       getFormattedDate,
       getFormattedTime;

    // Give functions names that make their purpose clear
    getFormattedDate = function() {
            var d = new Date(),
                months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            return days[d.getDay()] + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();       
    };
    getFormattedTime = function () {
            var d = new Date(),
                minutes = d.getMinutes().toString().length == 1 ? '0' + d.getMinutes() : d.getMinutes(),
                hours = d.getHours().toString().length == 1 ? '0' + d.getHours() : d.getHours();
            return hours + ':' + minutes;
    };

    // This function updates the time and then 
    // sets a timeout to execute again after 3 seconds.
    updateTime = function () {
        if (currentTime !== null && currentDate !== null) {
            currentTime.innerHTML = getFormattedTime();
            currentDate.innerHTML = getFormattedDate();
        }
        window.setTimeout(updateTime, 3000);
    };
    // Start it off.
    updateTime();
}());

document.getElementById（）！= null不能在firefox上运行

1 个答案:

编辑（回复评论）