如何在 iframe 中捕获图像（url）？答案

【问题标题】：How to capture an image(url) inside iframe?如何在 iframe 中捕获图像（url）？
【发布时间】：2012-05-08 04:54:26
【问题描述】：

在这里，我试图在 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;
        });
    });
});

有什么建议吗？

【问题讨论】：

如果两个页面不在同一个域中，访问 iframe 内容可能会成为问题（这也会在不同的浏览器中导致各种问题，因此必须尽可能避免使用 iframe）
ok dotnet 中的 iframe 传递 src 的解决方法是什么
解决这个问题的最佳方法是使用 AJAX 将另一个页面加载到一个 div 元素中，这样它就是同一个页面的一部分，你可以像任何其他元素一样抓取它。那么分配源应该没有问题。请记住，注入的页面通常会删除 javascript。
除非你创建一个“中间人”页面，否则ajax不会也引起跨域问题吗？

标签： c# javascript jquery asp.net iframe

【解决方案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"
            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

【讨论】：