用于检测浏览器分辨率的JS可在Chrome& Safari但不是IE9或FF9

时间:2012-01-27 21:34:57

标签: javascript jquery html css cross-browser

出于某种原因,这个用于检测浏览器分辨率的基本JS可以在Safari和Chrome中使用,但不适用于IE9或FF9。基本上,无论何时将要提交的表单都要提交,JS应该使用浏览器的高度和宽度更新隐藏的字段。但是这在IE9或FF9中也不起作用。

提交按钮 -

<input type="image" src="lib/send_feedback.jpg" border="0" class="feedback-submit-img" onClick="javascript: validate(); return false;"/>

隐藏的表单代码 -

<input name="h" id="h" type="hidden" value="" /><input name="w" id="w" type="hidden" value="" />

相关的jQuery -

// Submit form to next page
function submitForm() {
//   document.forms["feedbackform"].submit();
    document.feedbackform.submit();
}
// Submit form and validate email using RFC 2822 standard
function validateEmail(email) { 
    // Modified version original from: http://stackoverflow.com/a/46181/11236
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
// Return true if email field is left unchanged
function originalText(email){
    var defaultMsg;
    defaultMsg = "Enter your email address (optional)";
    if(defaultMsg == email){
        return true;    
    }
    return false;
}
// Verify or decline with error message
function validate(){
    $("#result").text("");
    var email = $("#email").val();
    if ((validateEmail(email)) || originalText(email)) {
        w.value = screen.width;
        h.value = screen.height;
        submitForm();
    } else {
        $("#result").text(email + " is not a valid email.");
        $("#result").css("color", "red");
    }
    return false;
}
$("form").bind("submit", validate);

Here is the entire codethe CSS

2 个答案:

答案 0 :(得分:2)

jquery有一种方法可以获得跨浏览器兼容的高度(使用.height()方法)。以下是

的手动方式来执行跨浏览器兼容的文档高度
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)
    );
}

http://james.padolsey.com/javascript/get-document-height-cross-browser/

这里是jquery版本(来自同一链接中的评论)

$.getDocHeight = function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
};

答案 1 :(得分:0)

当您说浏览器分辨率对您来说意味着显示器的物理尺寸?如果是这样,您可以使用:

var w = window.screen.width;
var h = window.screen.height;

这些与设备大小相同。

请参阅:responsejs.com/labs/dimensions/