document获取iframe_关于iframe生成图片

接到一个需求：在h5 parent上需要iframe嵌入第三方页面child，同时需要操作生成长图，拿着这个需求的时候，想着只要获取到第三方页面的dom元素了，利用html2canvas就能解决了，你以为就是你以为的吗？

想法1: 子页面传高度给父页面
为什么会有上面的的想法呢，是因为html2canvas需要width、height。width通过document.body.offsetWidth获取，但是高度是和页面内容有关系的，如果直接在父页面parent直接获取子页面child,并计算高度，发现会存在跨域的问题

操作子页面元素跨域

这样，要不我子页面child直接把高度传递给父页面parent,
window.parent.postMessage({

height: document.querySelector('body').scrollHeight,

}, '*')
通过上面方法，父页面在iframe的高度里完全按照子页面的height设置，展示挺好看的，没啥毛病，是不是可以利用html2canvas生成图片了呢，但实验发现：用iframe来生成的图片是空白的；用iframe子元素body来操作存在跨域问题，此时，需要考虑怎么避开跨域操作子元素呢？？？

空白图

跨域问题

想法2: 子页面传dom节点给父页面
子页面传递dom给父页面，如果是直接Element类型，如document.body是没法传递的，必须是字符串，所以采用的是document.body.innerHTML

子元素传递body

操作的时候发现，执行没啥问题，但是样式却丢失了，生成的图片和展示的页面不是一回事，开始想是html2canvas样式必须写在dom里还是页面带上了就可以，实验发现html2canvas的样式不一定写在dom里，页面有css文件也可以

只有body生成图片

想法3: 子页面把head和body传递给父页面

body+head

在生成图片的时候，利用子页面的body/head代替父页面的body/head,最后能成功生成第三方页面的长图，但其实这里直接传递最外层的html就行，没必要分批传递body/head