从javascript访问不同的HTML文件

Accessing different HTML files from javascript

本文关键字：HTML 文件 javascript 访问      更新时间：2023-09-26

我有一个javascript文件，它被两个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文件中，否则这是不起作用的，然后它就起作用了

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

简短回答：没有。

长答案：

JavaScript的作用域始终是当前文档，因此您不能同时访问2。但是，如果两个文档都在某种层次结构中，则有一些方法可以做到这一点。

如果您从1.html打开一个新窗口，您可以保存对该新窗口的引用并访问其内容。JavaScriptKit：通过另一个访问窗口的对象

这也通过window.opener引用起到相反的作用。

HTML5中的新功能也是window.postMessage。你可能想调查一下，因为这可能符合你的需要。Mozilla开发者网络：window.postMessage

如果你显然想让同一个脚本在两页上工作，只需对两个拉票使用相同的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>
…

如果为不存在的元素getElementById，则会得到undefined。

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

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

if (typeof ctx === "undefined") { continue; }
相关文章：