logo标签列表

在这种情况下，使用document.createElement比使用document.write更好？

javascripthtmlcanvas
4

好的，所以我正在制作一个基于html5 canvas和javascript的游戏。我正在考虑通过一个小脚本片段链接到外部js文件，使得任何人都可以将游戏放在他们自己的网站上。

在外部js文件中，整个游戏都已包含，我只需要找到用javascript代码创建canvas标签的最佳方法。

外部js链接：

<script src="http://host.com/game.js"></script>

这是我需要插入文档的单行画布代码：

<canvas id="canvas" style="display:block;margin:0px auto;" width="600" height="550">Your browser does not support the HTML5 canvas element.</canvas>

1. 我的第一选择是使用..

document.write('<canvas id="canvas" style="display:block;margin:0px auto;" width="600" height="550">Your browser does not support the HTML5 canvas element.</canvas>');

然而，据我所知，document.write并不受欢迎。

2. 我的下一个选择是使用...

document.createElement(canvas);
document.setAttribute(.....);
document.appendChild(....);

然而，这个选项意味着我必须包含一个带有外部 JS 链接的 div 或其他元素，以便我可以将画布附加到它上面。

3. 我最后一个已知的选项是使用...

document.getElementById('divWrapper').innerHTML('my canvas code');

然而，这个选项也意味着我必须包含一个带有外部js链接的div，以便我可以找到div的id，并通过innerHTML在其内部编写内容。
最后一个提示：人们将能够复制外部js链接并将其粘贴到他们自己的网站中（它不会在head中），如果我的选项需要一个带有脚本链接的div标签，那就没问题了。我想寻求的是让人们复制/粘贴的字符数量最少。
那么你推荐哪个选项？还有其他更好的方法吗？
如果在解析HTML时调用了document.write，那么就没问题。 - Felix Kling
你的意思是在<body>标签里包含外部JS链接，这样加载HTML页面时它会解析它，这样就不会有问题了，对吧？ - Jacob
是的......即使在头部也可以（但在head中没有意义（canvas元素））。但是您不应该在DOM解析之后调用该方法，否则会覆盖内容。 - Felix Kling
是的，我同意。我能不能在js文件中的任何地方调用document.write()？它不必在函数中被调用，对吧？ - Jacob
不应该有问题。但是我很少使用document.write，所以我的建议是：试一下 :) - Felix Kling
我以前在制作网站时使用过它，用于制作时钟小部件。我只是在寻找最佳的做事方式。 - Jacob
4个回答
3

document.write已经过时，请勿使用。我建议使用innerHTML。添加一个div是完全没问题的，这样可以让插入游戏的人更好地控制插入位置。

是的，对我来说innerHTML似乎也是最好的方式。 - Jacob
5
谁说它已经过时了？在某些情况下，使用它是完全可以的。不幸的是，一些（我猜是新手）JavaScript开发者在错误的上下文中使用它。 - Felix Kling
3

我应该将这个作为答案。

如果在解析HTML时调用document.write [文档]（这似乎是情况），那么使用它是完全可以接受的。

我不会用它编写更长的HTML代码，但一行HTML就可以了。

document.write的优点:（在这种情况下）

用户更容易将其添加到自己的页面中（只需复制和粘贴）。

innerHTML的优点：

您可以为用户提供指定要将画布附加到的元素的ID的选项。这增加了用户的灵活性，但需要额外的步骤。

是的，我同意。我可能会使用它，但 innerHTML 似乎更像是一个傻瓜式的解决方案，出错的机会较少。 - Jacob
1

document.write 不是一个好主意，因为它只在文档完全加载之前调用时才有效。

使用 DOM 是一个好主意，因为它更加跨浏览器。

var canvas = document.createElement('canvas');
canvas.setAttribute(...);
document.getElementById(...).appendChild(canvas);
如果我使用它，它将在文档完成加载之前被调用，因为外部JS链接位于body中...在这种情况下，那就没问题了？对吗？ - Jacob
@Jake 如果你确定它将在DOM组合期间始终执行，那么可以使用document.write。使用此资源的另一个可能问题是，打印的字符串将放置在script元素之后而不是特定位置。 - Wanderson Silva
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接