Мой HTML-файл не может загрузить мои файлы PDE в браузер? - PullRequest
Новая
       28

Мой HTML-файл не может загрузить мои файлы PDE в браузер?

0 голосов
/ 22 ноября 2018

Я создал файл эскиза с помощью processing.js и сохранил его в файл pde.Я сохранил исходный файл processing.js, мой html-файл и файл эскиза pde и получил следующую ошибку в консоли chrome: «Ошибка XMLHttpRequest, возможно, из-за нарушения политики того же источника».

IЯ чувствую, что мой 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>

Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

В дополнение к 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. Здесь - это шаблон, который я использую для набросков Processing.js в CodePen.

Бесстыдная самореклама: здесь - учебник по Processing.js.

0 голосов
/ 22 ноября 2018

Это связано с тем, что Chrome обрабатывает file: /// не так, как http (s): //, а JavaScript, вызывающий другие файлы локально, нарушает политику того же источника.Итак, вам нужно будет запустить это с локального сервера, чтобы перед вашим адресом был http: //.Вы можете прочитать больше об этом на их вики .

Если вы хотите легко запустить сервер, работающий python -m http.server (это предполагает Python 3, вам может потребоваться запустить python -m http.server) будет обслуживать текущий каталог, поэтому просто перейдите к правильному каталогу и выполните эту команду, а затем посещение http://localhost позволит вам получить доступ к файлам с локального сервера.

...