Question

我有一个由2个html文件调用的javascript文件，我需要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文件中，然后才能正常工作

，否则这不起作用

编辑：请注意我确实希望代码始终在后台运行，更新我不在的htlm文件。填充和清除只是我的代码的占位符，它不是问题

Answer 1

简短的回答：没有。

答案很长：

JavaScript始终作用于当前文档，因此您无法同时访问2。但是，如果两个文档都处于某种层次结构中，有很多方法可以做到这一点。

如果您从1.html打开一个新窗口，则可以保存对该新窗口的引用并访问其内容。 JavaScriptKit: Accessing objects of window via another

这也可以通过window.opener引用反过来。

HTML5中的新内容也是window.postMessage。您可能希望对此进行调查，因为它可能满足您的需求。 Mozilla Developer Network:window.postMessage

如果你明显希望同一个脚本在2个页面上工作，那么只需对两个画布使用相同的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>
…

Answer 2

如果您getElementById了一个不存在的元素，您将获得undefined。

如果您尝试访问undefined的属性，则会收到错误，脚本将停止执行。

获取元素后，测试是否有元素，如果没有，则跳到下一个循环迭代。

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

从javascript访问不同的HTML文件

2 个答案: