Question

我有一个iframe，我想在这个iframe中选择一个canvas元素。但它不起作用。我正在使用以下代码。

这是我的iframe

<body>
  <div id="canvasdiv" width="300" height="300"></div>
</body>

这是我的父母页面

<iframe name="iframe" id="iframe" frameborder="0" width="325" height="325" src="..."></iframe>

使用javascript我添加了一些带有一些属性的画布。例如id。

canvas.node.id = "canvas";

在我的父页面中，我收到了以下javascript。

var iframe = document.getElementById("iframe");
alert(iframe);
var iframe_canvas = iframe.contentDocument || iframe.contentWindow.document;
alert(iframe_canvas);
var canvas = iframe_canvas.getElementById("canvas");
alert(canvas);

结果：

iframe = iframe element
iframe_canvas = html element
canvas = null

有人知道为什么我无法访问canvas元素吗？ =（

Answer 1

对不起，我解决了这个问题。感谢所有的答复。 =）

为了测试我在$(document).ready调用它的getElementById函数。但此时浏览器没有呈现iframe。这就是为什么我可以自己访问iframe而不是iframe的元素。现在我将该功能分配给一个按钮，它可以工作。

Answer 2

根据你的HTML，这行代码：

var canvas = iframe_canvas.getElementById("canvas");

应该是你的div中正确的id值：

var canvas = iframe_canvas.getElementById("canvasdiv");

Answer 3

您省略了添加<canvas>元素本身的代码。您确定id是canvas吗？

如果您是，那么您可能会遇到有关访问iframe内容的同源政策问题。

Answer 4

你的代码对一部分很好。更换 getElementById("canvas") 同 getElementById("canvasdiv");

无法访问iframe中的canvas元素

4 个答案: