可以't访问iframe中的canvas元素

Can't access canvas element in iframe

本文关键字：iframe 中的 canvas 元素 访问 可以      更新时间：2023-09-26

我得到了一个iframe，我想在这个iframe中选择一个画布元素。但它不起作用。我正在使用以下代码。

这是我的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

有人知道我为什么不能访问画布元素吗=（

对不起，我解决了这个问题。谢谢你的回复

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

根据您的HTML，这行代码：

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

应该这样才能在div:中找到合适的id值

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

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

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

您的代码只需要一部分就可以了。代替getElementById("canvas")具有getElementById("canvasdiv");

相关文章：