Question

我想将iframe中的图像复制到textarea中。页面和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>

Answer 1

尝试使用jQuery。

向click添加$("iframe img")个事件。在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内容（以便我们将图像对象转换为可用的字符串），并更新textarea的值用它。当然，在我链接的演示中，#fake在这种情况下相当于iframe。

将图像从iframe复制到textarea

1 个答案: