我想将图像从 iframe 复制到文本区域中。页面和 iframe 不在同一域或服务器上。
关于如何使用 JavaScript 实现此目的有什么想法吗？
带有图像的iframe正在使用ajax来收集图像。
用法:
例如，我想使用此方法将图像从 iframe 复制到 wordpress 的tinymce 文本编辑器中。例如。在文本编辑器下显示带有图像库的 iframe，当他们单击 iframe 中的图像时，图像应显示在文本编辑器中(图像已上传)。
一些想法:
拖放图像接缝即可在 IE 和 FF 中工作。
右键单击、复制并粘贴图像可以在 IE 和 C 中使用。
如果我能在变量中获取图像的 src，以便能够添加“class”和“alt”，那就太好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Copy images from iframe</title>
</head>
<body>
<textarea style="width:100%;height:400px" >I want to be able to get theme here like this
<img src="http://www.page.com/image.jpg" alt="">
</textarea>
<iframe width="100%" height="400px" src="http://www.page-with-images.com/"></iframe>
</body>
</html>
最佳答案
尝试使用jQuery .
向 $("iframe img") 添加一个 click 事件。在 click 函数中，获取图像的 src 并将其作为图像标签附加到tinyMCE 编辑器。
这看起来像这样:
$(function(){
$("iframe img").click(function(){
var update = $("<div>").append(
$("<img>").attr("src", $(this).attr("src"))
).html();
$("#content").val(function( i, v ) {
return v + update;
});
});
});
Example ..
我们几乎克隆了图像，将其放置在临时 div 中，获取 div 的纯 HTML 内容(以便我们将图像对象转换为可用的字符串)，然后更新文本区域的值。当然，在我链接的演示中，#fake 相当于本例中的 iframe。
关于javascript - 将 iframe 中的图像复制到文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8499298/