2011-12-14 3 views
1

Я хотел бы скопировать изображения из iframe в текстовое поле. Страницы и iframe не находятся на одном домене или сервере.Копирование изображений из iframe в textarea

Любые идеи о том, как достичь этого, используя javascript?

IFrame с изображениями использует ajax для сбора изображений.

Использование:

Например, я хотел бы использовать этот метод для копирования изображений из фрейма в TinyMCE текстового редактора WordPress. Например. отображать iframe с галереей изображений под текстовым редактором, а когда они нажимают на изображение в iframe, изображение должно отображаться в текстовом редакторе (изображение загружается в alredy).

Некоторые идеи:

Перетащите и падение изображения швов работать в IE и FF.

Щелкните правой кнопкой мыши, скопировать и прошлые изображения швов работать в IE и C.

Было бы хорошо, если бы я мог получить СРК изображения в переменной, чтобы иметь возможность добавить «класс» и «альт ».

<!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> 
+0

_ "Страницы и iframe не находятся на том же домене или сервере." _ - Таким образом, вы не можете этого сделать. И из вашего комментария в ответ Пурмоу вы, кажется, уже понимаете, что вы не можете этого сделать. – nnnnnn

+0

У меня есть другой способ обмена значениями между доменами с помощью javascript. Если оба домена приняли обмен ... Жесткий Я МОГУ это сделать, если я буду называть PHP и file_get_contents(). – Hakan

ответ

0

Пробуйте использовать 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, получая чистое содержание HTML в DIV (так что мы преобразуем объект изображения в полезную строку) и обновляем значение textarea. Конечно, в демо-соединенном явлении #fake является эквивалентом iframe в этом случае.

+0

IFrame находится в другом домене. В противном случае я мог бы это сделать :) – Hakan

+0

Тогда вы не можете этого сделать. Период. –

+0

Возможно, это можно сделать с помощью localstorage? Просто получите src в varible som how: S – Hakan