我试图通过检查我所在的页面来将背景图像应用于body元素,然后根据我所在的页面(即index.php,book)添加一个类(具有background-image属性)。 php,library.php等。
当前,我正在使用document.location对象(即document.location.href),并且还尝试了window.location对象无济于事。
我的问题是Firefox返回的URL没有结尾的井号(#)或问号(?),而Chrome会返回带有这些结尾字符的URL,无论在这些字符之后是否还有其他URL。
这是我的代码:
switch(currentFileName()) {
case "index.php": bodyBackGroundFadeIn('home');
break;
case "library.php": bodyBackGroundFadeIn('library');
break;
case "store_library.php":
bodyBackGroundFadeIn('store_library');
break;
case "book.php": bodyBackGroundFadeIn('book');
break;
case "store_book.php": bodyBackGroundFadeIn('store_book');
break;
}
function currentFileName(){
var href = document.location.href;
return href.substr(href.lastIndexOf("/") + 1);
}
function bodyBackGroundFadeIn(class_name){
$(document.body).addClass(class_name);
$(document.body).animate({opacity: 1.0},'600');
}
有没有更好的方法来达到这种效果?我已经考虑过使用正则表达式来搜索“?”或“#”,但如果它不是跨浏览器的话,我不想弄乱它。
我还尝试使用按位运算符将空的哈希值反转,以使其在Firefox和Chrome上都能正常运行,但这也不起作用。
这是Firefox的输出:
>> document.location.href.substr(href.lastIndexOf("/") + 1);
"index.php"
这是Chrome的输出:
>> document.location.href.substr(href.lastIndexOf("/") + 1);
"index.php?"
还有一个this线程,它提供了多种方法来连接和推导字符串,但是没有方法可以解决此特定问题。