Question

我在HTML页面中遇到一个问题，实际上我需要实现以下内容 -

我需要在浏览器更改的基础上更改我的图像。因此，当我浏览Chrome时，它应该加载Image1，或者如果我使用IE浏览器，则加载Image2。请找到我正在使用的以下代码，但它不适用于我

 <!DOCTYPE html>

 <html>

 <head>

<meta charset="utf-8" />

<title></title>

<script language="javascript">

function browsercheck() {
    var userAgent = window.navigator.userAgent;
    return (userAgent.indexOf("MSIE ") > 0 || !!userAgent.match(/Trident.*rv\:11\./));
}

function displayImage() {
    debugger;

    var browser = browsercheck() ? 'IE' : 'Chrome';
    if (browser == "IE") {
        document.getElementById("image").setAttribute("src", "Image1.jpg");
    }
    else if (browser == "Chrome") {
        document.getElementById("image").setAttribute("src", "Image2.jpg");
    }

}
</script>
</head>
  <body">
<img id="image" this.src="displayImage()"  alt="can't display picture" />
</body>

Answer 1

如果您在CSS和JavaScript之间分配职责，那么维护起来会更简单。让每个人都做它的意思。

<script>
    var browser = browsercheck() ? 'ie' : 'chrome';
    document.body.className += ' ' + browser; // vanilla JS
    // $('body').addClass(browser);           // jQuery version
</script>

<style>
    .image {
        background-image: url("regular.jpg");
    }

    .chrome .image {
        background-image: url("chrome_specific.jpg");
    }    

    .ie .image {
        background-image: url("ie_specific.jpg");
    }
</style>

Answer 2

这个JSFiddle显示了浏览器检测的示例https://jsfiddle.net/311aLtkz/

我认为脚本不适合你，因为你有一个功能，而你没有在页面上使用该功能。编辑的代码应该在打开的页面

时起作用

function browsercheck() {
    var userAgent = window.navigator.userAgent;
    return (userAgent.indexOf("MSIE ") > 0 || !!userAgent.match(/Trident.*rv\:11\./));
}

var browser = browsercheck() ? 'IE' : 'Chrome';
    if (browser == "IE") {
        document.getElementById("image").setAttribute("src", "Image1.jpg");
        console.log("IE");
    }
    else if (browser == "Chrome") {
        document.getElementById("image").setAttribute("src", "Image2.jpg");
        console.log("Chrome");
    }

如何在浏览器检测的基础上更改图像

2 个答案: