Home/ Questions/Q 6933333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:49:10+00:00

I would like to copy images from a iframe into a textarea. The pages

  • 0

I would like to copy images from a iframe into a textarea. The pages and the iframe are not on the same domain or server.

Any ideas on how to achieve this using javascript?

The iframe with images is using ajax to collect images.

Usage:

For example I would like to use this method to copy images from a iframe into the tinymce text-editor of wordpress. Eg. display a iframe with a image gallery under the text-editor, and when they click on the image in the iframe the image should display in the text-editor (the image is alredy uploaded).

Some ideas:

Drag and drop the images seams to work in IE and FF.

Rightclick, copy and past images seams to work in IE and C.

It would be nice if I could get the src of the image in a variable, to be able to add “class” and “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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using jQuery.

    Add a click event to $("iframe img"). In the click function, get the image’s src and append that as an image tag to the tinyMCE editor.

    This would look something like this:

    $(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..

    We’re pretty much cloning the image, placing it in a temporary div, getting the pure HTML content of the div (so that we convert the image object to a usable string), and updating the textarea’s value with it. Of course, in the demo I linked, #fake is the equivalent of an iframe in this case.

    • 0