如何在 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)?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据窗口的顶部 URL 在 iframe 中更改徽标

如何使用外部图像 url 打印 iframe 内容

如何从父文档中捕获 iframe 内部的刷新?

我在IFRAME开放和外部网站。如何捕获在iframe中的外部网站点击的确切链接?

如何使用 react-native-camera 从相机胶卷 url 显示图像?

如何捕获从 iframe 内部抛出的异常?