从javascript访问不同的HTML文件_Javascript_Html

从javascript访问不同的HTML文件

javascript html

从javascript访问不同的HTML文件,javascript,html,Javascript,Html,我有一个被两个html文件调用的javascript文件，我需要javascript来编辑1.html和2.html上的画布，除非我将两个画布放在同一个html文件中，否则这不起作用。有没有办法解决这个问题，下面是代码： <body> <canvas class="canvas" id="canvas1"></canvas> </body </html> HTML1 <

我有一个被两个html文件调用的javascript文件，我需要javascript来编辑1.html和2.html上的画布，除非我将两个画布放在同一个html文件中，否则这不起作用。有没有办法解决这个问题，下面是代码：

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

HTML1

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


简短回答：没有
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

长答覆：
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

JavaScript总是限定在当前文档的范围内，因此您不能同时访问2。但是，如果两个文档都处于某种层次结构中，则有一些方法可以做到这一点
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

如果从1.html打开新窗口，则可以保存对该新窗口的引用并访问其内容
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

通过window.opener
参考，这也同样适用于反之亦然
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

HTML5中的新功能也是window.postMessage。您可能希望对此进行调查，因为它可能满足您的需要。

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

如果您显然希望相同的脚本在2页上工作，只需在两张画布上使用相同的id，而不是循环，就可以了
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

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

以及您的html：
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

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

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


…
…
…
…
如果对不存在的元素执行getElementById
，将得到未定义的
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

如果尝试访问未定义的属性
，将出现错误，脚本将停止执行
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

获取元素后，测试是否获得元素，如果没有，则跳到下一个循环迭代
        <body>
    <canvas class="canvas" id="canvas1"></canvas>
        </body
    </html>

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

canvas1
在HTML2中不存在，而canvas2
在HTML1中不存在。您需要在使用画布之前进行检查。