脚本在任何基于WebKit的浏览器中都可以正常工作,但在Firefox中则不行

时间:2014-07-31 19:22:56

标签: javascript php html wordpress firefox

我在(使用wordpress)header.php中有一个脚本,如下所示:

window.addEventListener("DOMContentLoaded", function(event) {
  fixedMenu.init("header-container", 0);
  fixedMenu.init("event-type-wrapper", 20);
  window.addEventListener('scroll', function(fid){
    fixedMenu.top("header-container");
    fixedMenu.top("event-type-wrapper");
  });
  var sessionvar = "<?php echo $_SESSION['lang'] ?>";
});

在此脚本之后,我使用脚本scr =“”标记包含一个较长的脚本。

在那个剧本中我有

window.addEventListener("DOMContentLoaded", function(event) {
    todays = document.getElementById("todays-events");
    upcomming = document.getElementById("upcomming-events");
    past = document.getElementById("past-events");
    texter = document.getElementById("event-type");

    changeMessage();
});

它在任何webkit浏览器中运行良好,代码启动,但firefox不加载第二个事件监听器(如果加载或不加载我不知道如何调试,但我没有在网页中看到结果)

有什么想法吗?

更新

如果需要,这里是通过脚本src =

嵌入的脚本的完整源代码
var todays;
var upcomming;
var past;
var texter;

window.addEventListener("DOMContentLoaded", function(event) {
    todays = document.getElementById("todays-events");
    upcomming = document.getElementById("upcomming-events");
    past = document.getElementById("past-events");
    texter = document.getElementById("event-type");

    changeMessage();
});

window.onscroll = function(){
  changeMessage();
}

function isElementInViewport (el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= document.body.scrollHeight &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

function changeMessage(){
  if(texter && todays && isElementInViewport(todays)){
    texter.textContent = returnString("Šiandien", "Today", "Сегодня");
  }
  else {
    if(texter && upcomming && isElementInViewport(upcomming)){
        texter.textContent = returnString("Artėjantys","Upcomming","Предстоящие");
    }
    else{
        if(texter && past && isElementInViewport(past)){
            texter.textContent = returnString("Praėję", "Past", "Прошлое");
        }
    }
  }
}

function returnString(lt, en, ru){
  if (!(typeof sessionvar === 'undefined')) {
    if(sessionvar == 'en_EN'){
        return en;
    }
    else if(sessionvar == 'ru_RU'){
        return ru;
    }
  }
  return lt;
}

2 个答案:

答案 0 :(得分:1)

问题是firefox报告

document.body.scrollHeight

为0,因为if内的每个changeMessage()都因为返回false而失败。

解决方案在SO中找到:.body.scrollHeight doesn't work in Firefox

报价:

function getDocHeight() {
  var D = document;
  return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
    Math.max(D.body.clientHeight, D.documentElement.clientHeight)
  );
}

答案 1 :(得分:0)

我认为不起作用的是 changeMes​​sage 函数中的代码,因为Firefox不理解 element.innerText ,你必须改为< EM> element.textContent