如何在 iframe 中捕获图像(url)?
Posted
技术标签:
【中文标题】如何在 iframe 中捕获图像(url)?【英文标题】:How to capture an image(url) inside iframe? 【发布时间】:2012-05-08 04:54:26 【问题描述】:在这里,我试图在 iframe 中捕获图像(url)。但它不起作用。这是我的代码:
<div id="iframe">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="border2">
<tr>
<td >
<asp:UpdatePanel ID="Update" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<iframe id="IFTrendAnalysis" name="IFTrendAnalysis" scrolling="auto" runat="server" 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;
);
);
);
有什么建议吗?
【问题讨论】:
如果两个页面不在同一个域中,访问 iframe 内容可能会成为问题(这也会在不同的浏览器中导致各种问题,因此必须尽可能避免使用 iframe) ok dotnet 中的 iframe 传递 src 的解决方法是什么 解决这个问题的最佳方法是使用 AJAX 将另一个页面加载到一个 div 元素中,这样它就是同一个页面的一部分,你可以像任何其他元素一样抓取它。那么分配源应该没有问题。请记住,注入的页面通常会删除 javascript。 除非你创建一个“中间人”页面,否则ajax不会也引起跨域问题吗? 【参考方案1】:如果您的 iframe 页面与父页面在同一个域中,那么这应该会对您有所帮助:
var name = "img_Sample";
$('#MainContent_iframeDetail').get(0).contentWindow.document.getElementById(name).src
我认为,您也应该能够使用 Jquery 代替 document.getElementByID
。
【讨论】:
【参考方案2】:<!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"
/>
<img src="https://lh5.googleusercontent.com/-y301Ju4n32g/TRCtzBfoiZI/AAAAAAAAABc/3tGEuAD3R8I/w487-h365-k/51.jpg"
/>
<img src="../../Images/Desert.jpg" />
</div>
<!-- <iframe id="MainContent_IFTrendAnalysis" src="http://api.jquery.com/append/"
></iframe>-->
</body>
</html>
enter code here
【讨论】:
以上是关于如何在 iframe 中捕获图像(url)?的主要内容,如果未能解决你的问题,请参考以下文章
我在IFRAME开放和外部网站。如何捕获在iframe中的外部网站点击的确切链接?