Javascript代码在jsfiddle中有效，但在浏览器中无效[关闭]答案

【问题标题】：Javascript Code works in jsfiddle and but not in the Browser [closed]Javascript代码在jsfiddle中有效，但在浏览器中无效[关闭]
【发布时间】：2014-04-17 02:15:15
【问题描述】：

我曾尝试搜索类似的问题，但无法找到我的代码在 jfiddle 中有效但在浏览器中无效的原因。我还尝试将我的代码从 jfiddle 复制到另一个 fiddle 项目，但该代码在新项目中不起作用。你可以找到my project here。我正在制作一个交互式食物游戏，其中有人挑选食物，例如橡子南瓜，然后用户可以拖动该图像。

我的第一次尝试是将代码粘贴到头部。

<script language="JavaScript">
code
</script>

我需要页面加载事件吗？ javascript是否需要放入函数中？我是否使用了 jfiddle 框架中的某些东西，而我需要调用的本地主机上没有使用这些东西？

下面是我使用的代码，没有额外的食物选项

var stage, layer;

var sources = {
    plate: 'http://www.healncure.com/wp-content/uploads/2014/03/plate1.jpg',
    acornsquash: 'http://www.healncure.com/wp-content/uploads/2014/03/acorn-squash.png',

};
loadImages(sources, initStage);

function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function () {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

function initStage(images) {
    stage = new Kinetic.Stage({
        container: 'container',
        width: 936,
        height: 550
    });
    layer = new Kinetic.Layer();
    stage.add(layer);

    // plate
    var plateImg = new Kinetic.Image({
        image: images.plate,
        x: 218,
        y: 20,
        width: 503,
        hei4ht: 502,
        draggable: false,
        visible: true
    });
    layer.add(plateImg);

    // acornsquash
    var acornsquashImg = new Kinetic.Image({
        id: "acornsquash",
        image: images.acornsquash,
        x: 50,
        y: 20,
        width: 134,
        height: 114,
        draggable: true,
        stroke: 'orange',
        strokeWidth: 5,
        strokeEnabled: false,
        visible: false

    });
    layer.add(acornsquashImg);

    layer.draw();

    $(".food").click(function () {
        var node = stage.find("#" + $(this).attr("id"));
        node.show();
        layer.draw();
        console.log($(this).attr("id"));
    });

    document.getElementById('hide').addEventListener('click', function () {
        acornsquashImg.hide();
        layer.draw();
    }, false);
}

【问题讨论】：

奇怪，考虑到 jsfiddle 在浏览器中运行。
要么放在 window.onload 事件上，要么放在 body 标签的末尾。必须先加载元素，然后 JS 才能“看到”它们。
您的小提琴设置为使用 jQuery。我敢说你的“真实页面”不是。
jsfiddle 为您的 javascript 部分添加了一个 Window Onload，您可以在检查它生成的 iframe 时看到它。
你是否包含了 jQuery 库？

标签： javascript jquery html loading

【解决方案1】：

这样做的通常原因是您将代码置于它所操作的元素之上，而不是使用onload 或“就绪”事件来延迟代码。 jsFiddle 的默认设置是将您的 JavaScript 放在 onload 处理程序中，这会将其延迟到页面加载过程的非常后期。

从根本上说，在您的代码可以对页面上的元素执行某些操作之前，该元素必须存在。要让它存在，浏览器必须已经为它处理了 HTML。所以这失败了：

<html>
<head>
<script>
// FAILS
document.getElementById("foo").style.color = "green";
</script>
</head>
<body>
<div id="foo">This is foo</div>
</body>
</html>

但这有效：

<html>
<head>
</head>
<body>
<div id="foo">This is foo</div>
<script>
// Works
document.getElementById("foo").style.color = "green";
</script>
</body>
</html>

我需要页面加载事件吗？

几乎肯定不会。

是否需要将javascript放入函数中？

不一定。您所做的是将script 标记放在HTML 的最末尾，就在结束</body> 标记之前。

【讨论】：

感谢您的示例。我明白为什么它似乎不起作用。我尝试将我的代码放在 html 下方，但没有解决问题。我还在头中包含了 jquery 库。仍然没有（从评论中提及）。我正在检查我的页面，我得到了这个，“Uncaught ReferenceError: Kinetic is not defined”。我该如何定义？
@user3251146：听起来您正在使用KineticJS，但不包括 KineticJS 脚本，在您的代码使用它之前需要包含该脚本。
@T.J.Crowder，我似乎遇到了类似的问题，尽管在我的情况下，在我的浏览器上运行由 JSFiddle iframe 生成的代码仍然不起作用。方便时可以看看我的问题here吗？我是 Web 开发的新手，所以我很难隔离问题。

【解决方案2】：

在文档的 head 部分中包含 jQuery 库

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

然后将您的自定义脚本包装在脚本标签和文档准备功能之间

<script>
  $(function() {

    ...your custom scripts...

  });
</script>

就在</body> 标记之前。

【讨论】：

我错过了这个，由于某种原因，当我将它包含在头部时它不起作用。当我包含 Microsoft CDN: 版本时，我的代码决定工作。