为什么这个工作不处理？答案

【问题标题】：Why won't this work processing?为什么这个工作不处理？
【发布时间】：2013-12-27 00:11:40
【问题描述】：

我已经尝试过无数次了。根据 processing.js 网站，在浏览器中运行草图所需的只是以下 html 代码：

<script src="processing-1.4.1.min.js"></script>

<canvas data-processing-sources="example.pde"></canvas>

我通过启动服务器测试了 processing.js 编译器中的代码，代码运行良好，但这里是：

void setup()
{
  size(200,200);
}

boolean pressed=false;

void draw()
{
  if (pressed)
    background(255);
  else
    background(0);  
}

void mousePressed()
{
  pressed=true;
}

void mouseReleased()
{
  pressed=false;
}

我不知道是目录问题还是什么，但我将 .txt 文件保存为 example.html，其中包含此查询顶部的 html 代码。此 html 文件保存在与 example.pde 文件相同的目录中。任何帮助，将不胜感激。

【问题讨论】：

你有processing-1.4.1.min.js在同一个文件夹吗？
当您在浏览器中打开文件时，您可以打开调试器来检查 js 文件是否正在加载？或者它说一些处理或一些功能没有定义？
是的 processing-1.4.1.min.js 在同一个文件夹中。对于canvas标签是否需要指定一个目录来查找example.pde？span>
所有代码都运行良好，当我打开保存 html 代码的 html 文件时，我只是得到一个白屏。

标签： javascript processing

【解决方案1】：

我认为您可能遇到了同源策略问题。我能够通过本地网络服务器运行您的草图，但是当我尝试使用 Chrome 打开 HTML 文件时，我得到了这个（右键单击页面 > 检查元素 > 控制台选项卡）：

未捕获的 Processing.js：无法加载 pjs 草图文件：example.pde ==> XMLHttpRequest 失败，可能是由于违反了同源策略。您可以尝试在其他浏览器中加载此页面，或加载它从 http://localhost 使用本地网络服务器。见 Processing.js README 更详细地解释了这个问题和解决方案。

您可以找到 Processing.js README 文件here，但基本上您可以运行本地网络服务器，或者尝试在另一个浏览器（可能是 Firefox）中打开您的 HTML 文件，或者在您的浏览器中禁用同源策略检查（ chrome --disable-web-security，例如）。请注意，最后一个选项是不安全的，如上面链接的 README 文件中所述。

让我知道此解决方案是否适合您。

【讨论】：