Question

我想在URL更改参数时更改图像。

例如：

http://localhost:8080/h5/informational.html

不要显示任何内容，但当URL有？type =参数时，我想显示图像。

我有这段代码，但它不起作用。

var img = new Image();
var div = document.getElementById('header');
var url = "http://172.18.43.33:58380/launcher/h5/informational/cabecera.html?type=";
var expansion = url + "expansion";
var experiencia = url + "experiencia";
if (expansion == true) {
  img.onload = function() {
    div.innerHTML += '<img src="' + img.src + '" />';
  };
} else if (experiencia == true) {
  img.onload = function() {
    div.innerHTML += '<img src="' + img.src + '" />';
  };
  img.src = 'images/experiencia.jpg';
} else {
  //Error
}

Answer 1

if (location.search.indexOf("expansion") !=-1)是一个更好的测试。现在，您正在测试字符串的truthy值 - 当字符串不为空时始终为true

你可能想要这个：

var type = "";
if (location.search.indexOf("type=expansion"!=-1) {
    type="expansion";
}
else if (location.search.indexOf("type=experiencia"!=-1) {
    type="experiencia";
}
if (type) {
  document.getElementById('header').innerHTML += '<img src="images/'+type+'.jpg"/>';
}

使用How can I get query string values in JavaScript?

中的代码

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var type = getParameterByName("type");
if (type) {
  document.getElementById('header').innerHTML += '<img src="images/'+type+'.jpg"/>';
}

更改URL中的参数时更改图像

1 个答案: