2012-04-27 83 views
2

這裏我試圖捕獲iframe中的圖像(url)。但它不起作用。這裏是我的代碼:如何在iframe中捕捉圖像(url)?

<div id="iframe"> 
    <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0" class="border2"> 
     <tr> 
      <td height="403"> 
       <asp:UpdatePanel ID="Update" runat="server" UpdateMode="Conditional"> 
        <ContentTemplate> 
         <iframe id="IFTrendAnalysis" name="IFTrendAnalysis" scrolling="auto" runat="server" width="100%" height="403" frameborder="0"></iframe> 
        </ContentTemplate> 
        <Triggers> 
         <asp:AsyncPostBackTrigger ControlID="imgBTNSalesTrendChart" /> 
        </Triggers> 
       </asp:UpdatePanel> 
      </td> 
     </tr> 
    </table> 
</div> 

和圖像路徑(動態生成的)

http://10.232.151.132:8080/pentaho/getImage?image=picture658447691538512233.png

$(function() { 
    $("#MainContent_IFTrendAnalysis img").click(function() { 
     var update = $("<div>").append(
      $("<img>").attr("src", $(this).attr("src")) 
     ).html(); 

     $("#content").val(function (i, v) { 
      return v + update; 
     }); 
    }); 
}); 

有什麼建議?

+0

訪問iframe中的內容可以是一個問題,如果兩個頁面不在同一個域(它會導致不同的瀏覽器的各種問題也這就是爲什麼必須避免的IFRAME如果可能) – GillesC 2012-04-27 12:40:55

+0

確定是什麼工作,周圍的iframe在dotnet中傳遞src – bala3569 2012-04-27 12:42:46

+2

處理這個問題的最佳方法是使用AJAX加載div元素內的其他頁面,這樣它就是同一頁面的一部分,您可以像其他任何元素一樣抓取它。然後分配源應該沒有問題。請記住,注入的頁面經常會在那裏javascript被刪除。 – GillesC 2012-04-27 12:46:27

回答

0

如果您的iframe頁面相同的域父頁內,那麼這應該可以幫助您:

var name = "img_Sample"; 
$('#MainContent_iframeDetail').get(0).contentWindow.document.getElementById(name).src 

我想,你應該能夠到位的document.getElementByID使用jQuery爲好。

-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#MainContent_IFTrendAnalysis').find('img').live('click', function() { 
       var obj = $(this); 

       $('#content').val(function (i, value) { 
        if (($.trim(value).length === 0) || ($('<div>' + value + '</div>').find('[src="' + obj.attr('src') + '"]').length === 0)) { 
         return value + $('<div></div>').append($('<img />', { 'src': obj.attr('src') })).html(); 
        } 
        else { 
         $('#imgExistMessage').fadeIn(500).fadeOut(500); 

         return value; 
        } 
       }); 

      }); 
     }); 
    </script> 
</head> 
<body> 
    <span id="imgExistMessage" style="font-size: 15px; font-weight: bolder; color: Red; 
     display: none;">Image has been already selected.</span> 
    <br /> 
    <textarea id="content" cols="50" rows="20"> 
    </textarea> 
    <div id="MainContent_IFTrendAnalysis"> 
     <img src="https://lh3.googleusercontent.com/-ZkMSKCbY0Y8/TRCpCX5p35I/AAAAAAAAABQ/ZL2nsL-ir7U/s277/3.jpg" 
      width="100" height="100" /> 
     <img src="https://lh5.googleusercontent.com/-y301Ju4n32g/TRCtzBfoiZI/AAAAAAAAABc/3tGEuAD3R8I/w487-h365-k/51.jpg" 
      width="100" height="100" /> 
     <img src="../../Images/Desert.jpg" width="100" height="100" /> 
    </div> 
    <!-- <iframe id="MainContent_IFTrendAnalysis" src="http://api.jquery.com/append/" width="300px" 
     height="500px"></iframe>--> 
</body> 
</html> 

    enter code here 
+0

現場演示請參閱此鏈接:http://jsfiddle.net/nanoquantumtech/TJyer/ – Thulasiram 2012-04-28 06:21:17