加载页面时 JavaScript 未运行`

Question

我有一个html文件并有一个 div包含image src

<div id="imageoutput"><img id="imgoutput" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA"></div>

这里我忽略了一些Base64数据，因为太长了，只是为了方便大家阅读代码。

所以我有一个 javascript文件包含在HTML中。

document.onload = function () {
    var existingData = document.getElementById('imgoutput').src;
}

我想要 src对于此图像，当页面加载时，但似乎当我

console.log(existingData)

它总是给我这个错误

Uncaught ReferenceError: existingData is not defined

但如果我这样做

console.log(document.getElementById('imgoutput').src)

它会给我 image src

编辑

如果我做错了，有什么可能的方法来获取图像 src 并将其存储在变量中？

Answer 1

如果您只是通过转到页面、打开开发工具并键入它来执行 console.log(existingData) ，那么错误的原因很简单:它将寻找全局变量，并且 existingData 不是全局变量，您已在 onload 函数中将其定义为本地变量。

如果您在开发工具中的 onload 函数中放置了断点，请重新加载页面，使其停止在该断点处，然后运行 ​​console.log，此时控制台将有权访问断点所在代码范围内的内容，并且您将看到该值。

如果您实际上在 onload 函数中编写 console.log - 更一般地说，如果您仅在该函数中使用 existingData - 它'将被定义并且(在赋值之后)具有一个值。

根据您想要使用它的方式/位置，此问题的答案可能也很有用:如何从异步调用返回响应？