我有一个由 2 个 html 文件调用的 javascript 文件，我需要 javascript 来编辑 1.html 和 2.html 上的 Canvas ，除非我将两个 Canvas 放在同一个 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);
}
除非我将两个 Canvas 放入同一个 html 文件中，否则这不起作用
编辑:请注意，我确实希望代码始终在后台运行，更新我不在的 htlm 文件。填充和清除只是我的代码的占位符，不属于问题
最佳答案
简短回答:不，没有。
长答案:
JavaScript 的作用域始终为当前文档，因此您无法同时访问 2 个文档。但是，如果两个文档都处于某种层次结构中，则有多种方法可以做到这一点。
如果您从 1.html 打开一个新窗口，您可以保存对该新窗口的引用并访问其内容。 JavaScriptKit: Accessing objects of window via another
通过 window.opener 引用，反之亦然。
HTML5 中的新功能还有 window.postMessage。您可能想研究一下这个，因为它可能满足您的需求。
Mozilla Developer Network:window.postMessage
如果您明确希望相同的脚本在 2 个页面上运行，只需对两个 Canvas 使用相同的 id 而不是循环，就可以了。
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>
…
关于javascript - 从 javascript 访问不同的 HTML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20607941/