javascript - 链接到不存在的文件后,Chrome 未重新加载对象标记
问题描述
我有以下 index.html。下面 javascript 的目的是重新加载#obj
元素的数据标签,以便它可以显示多个图像。但是,我将按钮链接到的图像之一可能不存在(在本例中为#2
)。
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 {
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 的方法。
解决方案
尝试将标签更改为 an<img>
并设置“src”属性。
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>
推荐阅读
- node.js - 我正在尝试在 heroku 中部署 Nodejs 应用程序,但它一直告诉我“应用程序错误”
- google-sheets - 一种在 Google 电子表格中为动态条件格式引用“当前单元格”的方法
- java - Java:字符串中的元音数
- c++ - 如何将 SDL 包含到 clion 项目中?
- python - gremlin id 列提取 - GLUE
- google-app-engine - Google App Engine:import myfile 给出 502 bad gateway
- android - Android FindViewById 仅适用于子布局(列表视图行),不适用于父布局中的 TextView
- r - 在 R 中自动绘制不同的图形
- localstack - localstack v0.11.5 和 kcl v1.13.3
- forms - 从第二个子表单组合框中选择值时显示的访问 2016 参数值消息