如何在 iframe 中创建画布元素

How to create a canvas element inside an iframe?

本文关键字：布元素 元素 创建 iframe      更新时间：2023-09-26

我有一个iframe，其中有DIV元素"pageContainer1"。我希望能够在该 DIV 元素中添加画布元素并访问它以在其上绘制一些内容。到目前为止，我已经尝试过，但似乎不起作用。

var can=document.getElementById('frame').contentWindow.document.getElementById("pageContainer1");
var canvas=document.createElement("canvas");
canvas.id="testcanvas";
can.appendChild(canvas);
var can1=document.getElementById("frame").contentWindow.document.getElementById("testcanvas");
var ctx= can1.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(20,20);
  ctx.lineTo(100,100);
  ctx.stroke();

请建议一些方法来做到这一点，即使使用 jQuery。

  1. 验证 iframe 是否已完全加载，并且您是否在变量"can"中获取有效元素

  2. 当您已经在变量"canvas"中访问画布时，您是否需要再次获取画布？ 尝试删除它并查看它是否有效。

  3. 尝试检查页面并确保已添加画布

编辑看看这是否有帮助： 

function loaded() {
    var iframe = document.getElementById('thisistheiframe');
    var iframediv = iframe.contentWindow.document;
    iframediv.body.innerHTML += '<canvas id="thecanvas" style="background-color:red; width:100px; height:100px"></canvas>';
    var c = iframediv.getElementById('thecanvas');
    var ctx = c.getContext('2d');
    ctx.moveTo(20, 20);
    ctx.lineTo(100, 100);
    ctx.stroke();
}

http://jsfiddle.net/mW8kv/

编辑 2更新了小提琴以使用createElement，而不仅仅是设置html：

var can = iframediv.createElement('canvas')
can.id = 'thecanvas';
iframediv.body.appendChild(can);
var c = iframediv.getElementById('thecanvas');
相关文章：