【问题标题】:Script works fine in any WebKit based browser but doesn't in Firefox脚本在任何基于 WebKit 的浏览器中都可以正常工作,但在 Firefox 中则不行
【发布时间】:2014-07-31 19:22:56
【问题描述】:

我在(使用 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'] ?>";
});

在这个脚本之后,我包含一个更长的脚本,带有 script 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 不加载第二个事件侦听器(我不知道如何调试它是否加载,但我在网页中看不到结果) .

有什么想法吗?

更新

如果有需要,这里是通过 script 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;
}

【问题讨论】:

  • 这就是为什么会有jQuery
  • @Kaiido 我了解带有断点的调试器,但我不了解如何在该调试器中查看事件。
  • 好吧,我会在事件函数中使用 firebug 和 console.log(event),然后我会移动我的 console.log,直到找到它中断的位置以及原因。你没有抛出任何错误吗?
  • 我最终登录以控制台更改消息和里面的那些 ifs,他们都给了我错误。问题是 Firefox 将 document.body.scrollHeight 报告为 0...

标签: javascript php html wordpress firefox


【解决方案1】:

问题是firefox报告

document.body.scrollHeight

为 0,因为 changeMessage() 内的每个 if 都因返回 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)
  );
}

【讨论】:

    【解决方案2】:

    我认为changeMes​​sage函数里面的代码不起作用,因为Firefox不理解element.innerText,你必须更改为 element.textContent

    【讨论】:

    • 你是对的,我使用*.inner* 设置消息,只是不是使用innerText,而是使用innerHTML,如果我在Firefox 控制台element.innerHTML = "test" 中设置消息,那么它可以正常工作。试过textContent - 没用。
    • 当你像这样放置内联脚本时会发生什么: var sessionvar = ""; 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"); }); });
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-20
    • 1970-01-01
    • 1970-01-01
    • 2014-08-13
    • 2011-06-11
    相关资源
    最近更新 更多