我有以下索引.html。下面的javascript的目标是重新加载元素的数据标签，以便它可以显示多个图像。但是，我链接按钮的图像之一可能不存在（在本例中为 ）。#obj#2function updateObject(evt) { var id = evt.currentTarget.id; var object = document.getElementById("obj"); if (id == "1") { object.setAttribute("data","https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg") } else { object.setAttribute("data", "file/that/doesnt/exist") }}for (var i = 0; i < document.getElementsByTagName("button").length; i++) { document.getElementsByTagName("button")[i].addEventListener("click", updateObject, false);}<!DOCTYPE html><html> <head> <title>Home</title> <meta name='viewport' content='width=device-width, initial-scale=1.0'> </head> <body> <button id="1">button1</button> <button id="2">button2</button> <object id="obj" style='width: 100px'></object> </body></html>我期望在以下脚本中发生的事情是这样的：用户按下按钮1，看到苹果用户按下按钮2，什么也没看到用户按下按钮1，看到苹果但是，第三步没有发生 - 当我在链接到不存在的文件后尝试重新加载对象的数据时，它保持空白。据我所知，这发生在Chrome中，对我来说，这是在Safari中工作的。我必须使用对象标签或其他一些允许交互式SVG的方法。
3 回答
ITMISS
TA贡献1871条经验 获得超8个赞
您可以采取的一种解决方案是删除并添加节点本身以强制进行硬重置
var clone = object.cloneNode();
var parent = object.parentNode;
parent.removeChild(object);
parent.appendChild(clone);
function updateObject(evt) {
var id = evt.currentTarget.id;
var object = document.getElementById("obj");
if (id == "1") {
object.setAttribute("data", "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg")
var clone = object.cloneNode();
var parent = object.parentNode;
parent.removeChild(object);
parent.appendChild(clone);
} else {
object.setAttribute("data", "file/that/doesnt/exist")
}
}
for (var i = 0; i < document.getElementsByTagName("button").length; i++) {
document.getElementsByTagName("button")[i].addEventListener("click", updateObject, false);
}
<button id="1">button1</button>
<button id="2">button2</button>
<object id="obj" style='width: 100px'></object>
眼眸繁星
TA贡献1873条经验 获得超9个赞
尝试将标记更改为 a 并设置“src”属性。<img>
function updateObject(evt) {
var id = evt.currentTarget.id;
var object = document.getElementById("obj");
if (id == "1") {
object.setAttribute("src","https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg")
}
else {
object.setAttribute("src", "file/that/doesnt/exist")
}
}
for (var i = 0; i < document.getElementsByTagName("button").length; i++) {
document.getElementsByTagName("button")[i].addEventListener("click", updateObject, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<button id="1">button1</button>
<button id="2">button2</button>
<img id="obj" style='width: 100px'></img>
</body>
</html>
慕后森
TA贡献1802条经验 获得超5个赞
我提供了一个示例，通过向该URL发出虚假请求来帮助您解决问题。
铬这样做是为了通知。即使您正确处理正确的错误处理，并且每个技巧都带有或被告知要防止错误 - 您也无法修复它。它不受脚本控制。onerrortry-catchvoid( )
function updateObject(evt) {
var id = evt.currentTarget.id;
var object = document.getElementById("obj");
if (id == "1") {
object.setAttribute("data","https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg");
}
else {
var request;
if(window.XMLHttpRequest)
request = new XMLHttpRequest();
else
request = new ActiveXObject("Microsoft.XMLHTTP");
request.open('GET', 'file/that/doesnt/exist', false);
request.send();
// the object request will be actually modified
if (request.status === 404) {
alert("The file you are trying to reach is not available.");
}
else
{
object.setAttribute("data", "file/that/doesnt/exist");
}
}
}
for (var i = 0; i < document.getElementsByTagName("button").length; i++) {
document.getElementsByTagName("button")[i].addEventListener("click", updateObject, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<button id="1">button1</button>
<button id="2">button2</button>
<object id="obj" style='width: 100px'></object>
</body>
</html>
但请注意，它仅适用于同一来源。对于另一台主机，您将必须使用服务器端语言来执行此操作，您必须自己弄清楚。
添加回答
举报
0/150
提交
取消