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

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

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 I 'm not in. Заполнение и очистка являются просто заполнитель для моего кода, который не является частью проблемы.

источник

2013-12-16 Isha Dijcks

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

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

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

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

Если вы открываете новое окно из 1.html, вы можете сохранить ссылку на это новое окно и получить доступ к ее содержимому. JavaScriptKit: Accessing objects of window via another

Это также работает наоборот с помощью ссылки window.opener.

Новое в HTML5 также является window.postMessage. Возможно, вы захотите изучить это, поскольку это может послужить вашей потребности. Mozilla Developer Network: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> 
…

источник

2013-12-16 10:06:03

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

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

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

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

источник

2013-12-16 10:09:39 Quentin

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

ответ

Смежные вопросы