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，此时控制台将可以访问断点所在代码范围内的东西，你会看到值。

如果您实际在console.log函数中写onload - 更一般地说，如果您只在该函数中使用existingData - 它将被定义并且（在分配后）具有价值。

根据您希望如何/在何处使用它，此问题的答案也可能有用：如何从异步调用返回响应？

Answer 2

正如其他人在已发布的评论/答案中所提到的，您的方法的问题是范围和时间。 JavaScript是函数作用域，意味着变量existingData在window.onload函数范围之外不可用。您可以通过将var existingData;声明移到函数外部来将变量提升到全局范围来解决这个问题。

第二个问题是时机。 onload函数是异步操作，意味着console.log函数声明之外的简单window.onload仍会产生undefined的结果，因为异步操作尚未完成。要解决此问题，您可以使用Promise的原生实现和提供的.then()回调来完成您要查找的内容。

<强>样本：

var existingData; 

function load(){
    return new Promise(function(resolve) {
        if (document.readyState === "complete") {
            existingData = document.querySelectorAll("img")[0].src;
            return resolve();
        }
        document.addEventListener("DOMContentLoaded", function () {
            existingData = document.querySelectorAll("img")[0].src;
            return resolve();
        }, false);
    });
}

load().then(function () {
    alert(existingData);
});

<img src="http://stackexchange.com/content/img/hero/vote.png" />

注意： IE中不支持Promise，因此您可能需要使用一个安全地抽象此功能的库，并为具有非本机支持的浏览器提供后备。

Answer 3

可能错误来自其他地方，因为您使用的是现有数据变量，但变量是在onload作用域中设置的，因此无法访问。

您应该将var声明放在根目录上：

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

修改

这允许你到达变量，你应该在onload中调用你的方法：

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

页面加载时JavaScript未运行

3 个答案: