將iframe中的圖像複製到textarea中

我想將iframe中的圖像複製到textarea中。頁面和iframe不在同一個域或服務器上。將iframe中的圖像複製到textarea中

任何想法如何實現這個使用JavaScript？

帶圖像的iframe使用ajax來收集圖像。

用法：

比如我想用這種方法從iframe中的影像複製到WordPress的TinyMCE的文本編輯器。例如。在文本編輯器下顯示帶有圖庫的iframe，當他們點擊iframe中的圖像時，圖像應該在文本編輯器中顯示（圖像被上傳）。

一些想法：

拖放圖片接縫在IE和FF工作。

右擊，複製和過去的圖像接縫在IE和C.

工作

這將是很好，如果我能獲得圖像的src在一個變量，要能夠加上「類」和「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>

來源

2011-12-14 Hakan

_」頁面和iframe不在同一個域或服務器上。「_ - 所以你不能這樣做。從你在Purmou的回答下你的評論你似乎已經意識到你不能這樣做。 – nnnnnn 2011-12-14 05:51:33

我在那裏必須有另一種方式來交換使用javascript的域名之間的值。如果兩個域都接受了交換...堅韌我可以做到這一點，如果我invlove PHP和file_get_contents（）。 – Hakan 2011-12-14 06:01:26

嘗試使用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。「

來源

2011-12-14 03:55:39 Purag

將iframe中的圖像複製到textarea中

回答

相關問題