我在(使用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;
}
问题是firefox报告
document.body.scrollHeight
为0,因为changeMessage()
中的每个if
都失败,返回false。
在SO: .body中找到了解决方案。scrollHeight在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)
);
}
我认为不工作的是changeMessage函数内部的代码,因为Firefox不理解元素。innerText,你必须改变为element.textContent