Доступ к различным файлам HTML из JavaScript

Question

Доступ к различным файлам HTML из JavaScript

0

У меня есть файл javascript, который вызывается 2 html файлами, мне нужен javascript для редактирования холста, который находится на 1.html и 2.html, это не работает, если я не помещаю обе холсты в один и тот же файл html. Есть ли способ обойти эту проблему, вот код:

HTML1

        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

HTML2

        <!DOCTYPE html>
    <html>
        <head>
     <script type="text/javascript" src="script.js"></script>
        </head>

        <body>
    <canvas class="canvas" id="canvas2"></canvas>
        </body
    </html>

Javascript:

    for (var i = 1; i<3; i++) {         
var c=document.getElementById("canvas"+[i]);        
var ctx=c.getContext("2d"); 
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
}

Это не работает, если я не помещаю оба холста в один и тот же html файл, тогда он работает

EDIT: Обратите внимание, что я действительно хочу, чтобы код работал в фоновом режиме во все времена, обновляя файлы htlm, в которых я не включен. Заполнение и очистка - это просто заполнитель для моего кода, который не является частью проблемы

Isha Dijcks 16 дек. 2013, в 11:46

Источник

0

canvas1 не существует в HTML2, а canvas2 не существует в HTML1. Вы должны проверить перед использованием холста.
CodingIntrigue 16 дек. 2013, в 10:03

Теги:

javascript

html

2 ответа

0

Если вы getElementById для элемента, который не существует, то вы получите undefined.

Если вы попытаетесь открыть свойство undefined, вы получите сообщение об ошибке, и скрипт прекратит выполнение.

После получения элемента проверьте, есть ли у вас элемент, и пропустите к следующей итерации цикла, если вы этого не сделали.

if (typeof ctx === "undefined") { continue; }

Quentin 16 дек. 2013, в 08:11

Ещё вопросы

canvas1 не существует в HTML2, а canvas2 не существует в HTML1. Вы должны проверить перед использованием холста.

Torsten Walter · Accepted Answer · 2013-12-16T07-44-00.000Z

Короткий ответ: Нет, нет.

Длительный ответ:

JavaScript всегда привязан к текущему документу, поэтому вы не можете одновременно получить доступ к 2. Однако есть способы сделать это, если оба документа находятся в какой-то иерархии.

Если вы откроете новое окно из 1.html, вы можете сохранить ссылку на это новое окно и получить доступ к ней. JavaScriptKit: доступ к объектам окна через другой

Это также работает наоборот через ссылку window.opener.

Новое в HTML5 также является window.postMessage. Возможно, вы захотите изучить это, поскольку это может послужить вашей потребности. Сеть разработчиков Mozilla: window.postMessage

Если вы явно хотите, чтобы один и тот же скрипт работал на 2 страницах, просто используйте один и тот же идентификатор для обеих полос, а не для цикла, и все должно быть в порядке.

var c=document.getElementById("canvas");        
var ctx=c.getContext("2d"); 
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

И ваш html:

<!--1.html-->
…
<canvas class="canvas" id="canvas"></canvas>
…

<!--2.html-->
…
<canvas class="canvas" id="canvas"></canvas>
…