Question

我已经使用processing.js创建了一个草图文件，并将其保存到pde文件中。我保存了processing.js源文件，html文件和sketch pde文件，并在chrome控制台中收到以下错误： “ XMLHttpRequest失败，可能是由于同源策略违反。”

我认为我的html在源代码集成方面是正确的，并且我的pde文件已正确保存，所以我不确定为什么html文件没有加载草图。这是我的以下文件：

hello_web.pde：

    void setup() {
    size(200, 200);
    background(100);
    stroke(255);
    ellipse(50, 50, 25, 25);
    println("hello web!");
}

hello_web.html：

    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello Web - Processing.js Test</title>
    <script src="processing-1.0.0.min.js"></script>
    </head>
    <body>
    <h1>Processing.js Test</h1>
    <p>This is my first Processing.js web-based 
    sketch:</p>
    <canvas data-processing-sources="hello-web.pde"> . 
    </canvas>
    </body>
    </html>

谢谢！

Answer 1

这是因为Chrome将file：///与http：//区别对待，并且JavaScript在本地调用其他文件违反了同源政策。因此，您将需要从本地服务器运行此命令，以便地址前面有http：//。您可以在their wiki上了解有关此内容的更多信息。

如果要轻松启动服务器，请运行python -m http.server（假设使用Python 3，则可能需要运行python -m http.server）将服务于当前目录，因此只需导航至正确的目录即可。目录并运行该命令，然后访问http://localhost将允许您从本地服务器访问文件。

Answer 2

除了Unsolved Cypher's answer之外，请注意，您还可以将所有内容放在一个文件中，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>My Sketch</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
    </head>
    <body>
        <script type="application/processing">
            void setup(){
                size(200, 200);
            }

            void draw(){
                background(64);
                ellipse(mouseX, mouseY, 20, 20);
            }
        </script>
        <canvas> </canvas>
    </body>
</html>

或者您可以使用免费的虚拟主机或CodePen之类的服务。 Here是我在CodePen上用于Processing.js草图的模板。

无耻的自我推广：here是有关Processing.js的教程。

我的HTML文件无法在浏览器中加载我的PDE文件？

2 个答案: