locked
Accessing Image control in one page from another page? RRS feed

  • Question

  • User695775321 posted

    My scenario is relatively easy but I'm not sure how to do it. I have an IFrame and Image control (animated "opening/loading" gif) on one aspx page. In the IFrame, another page loads ...but while it is loading, the animated gif appears. I just need to hide the gif after the page loads in the IFrame. I would hide this gif in the code-behind of the page that loads into the IFrame. I'm just not sure how to reference that Image.

    Thanks

    Monday, September 10, 2018 4:33 PM

All replies

  • User839733648 posted

    Hi rsmldmv,

    According to your description, I suggest that you could  implement your needs in js code.

    You may hide the container of Iframe by setting the style to “display:none”.

    This is to ensure that the Iframe will not be seen if its content is not yet loaded on load of the page and instead show the animated gif.

    Then call the javascript method “hideLoading()” at onload event of Iframe to hide the animated gif when the content of the iframe is loaded.

    I’ve made a sample on my side, and for more details, you could refer to the code  below.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function hideLoading() {
                document.getElementById("divLoading").style.display = "none";
                document.getElementById("divFrameHolder").style.display = "block";
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="divLoading">
                <img src="Image/loading.gif" alt=""/>
            </div>
            <div id="divFrameHolder" style="display:none">
                <iframe src="https://www.bing.com/" onload="hideLoading()"></iframe>
            </div>
        </form>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Tuesday, September 11, 2018 9:12 AM
  • User695775321 posted

    Hi Jenifer,

    Thanks for your code. I copied your code verbatim into my app. However, when I ran the app, it threw an exception. Here is the error message:

    "hideLoading' is not a member of 'ASP.masftninfo_aspx"

    Here is my code:

    function hideLoading() {
         document.getElementById("imgLoading").style.display = "none";
    }

    <asp:Panel ID="pBody6" runat="server" CssClass="cpBody">
         <asp:Image ID="imgLoading" ImageUrl="Images/Spinner-Loading.gif" width="10%" Height="10%" runat="server" />
         <iframe id="iFrameTool" scrolling="yes" frameborder="0" width="100%" height="800px" runat="server" onload="hideLoading()" ></iframe>
    </asp:Panel>

    Tuesday, September 11, 2018 1:45 PM
  • User839733648 posted

    Hi rsmldmv,

    According to your description, I suggest that you could add a “src” in your frame control.

    An iframe lets you embed another document and you have to specify its location.

    More about iframe, you may refer to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe 

    For more details, you could refer to the following code.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function hideLoading() {
                document.getElementById("imgLoading").style.display = "none";
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <asp:Panel ID="pBody6" runat="server" CssClass="cpBody">
                <asp:Image ID="imgLoading" ImageUrl="Image/loading.gif" Width="10%" Height="10%" runat="server" />
                <iframe id="iFrameTool" src="https://www.bing.com/" scrolling="yes" frameborder="0" width="100%" height="800px" onload="hideLoading()"></iframe>
            </asp:Panel>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    Wednesday, September 12, 2018 6:07 AM
  • User695775321 posted

    Jenifer,

    Actually what I did was load the iframe's src with the Image first, then as soon as the page loaded in the iframe, the Image was hidden. The only thing I wasn't able to do was to center the Image properly within the iframe.

    Thanks for your help!

    Wednesday, September 12, 2018 8:47 PM
  • User839733648 posted

    Hi rsmldmv,

    If you want to center the image within the frame, you could add css style to your image.

    For more details, you could refer to the code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function hideLoading() {
                document.getElementById("imgLoading").style.display = "none";
            }
        </script>
        <style type="text/css">
            #imgLoading {
                ;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Panel ID="pBody6" runat="server" CssClass="cpBody">
                <asp:Image ID="imgLoading" ImageUrl="Image/loading.gif" runat="server" />
                <iframe id="iFrameTool" src="https://www.bing.com/" scrolling="yes" frameborder="0" width="100%" height="800px" onload="hideLoading()"></iframe>
            </asp:Panel>
        </form>
    </body>
    </html>
    

    result:

    Bset Regards,

    Jenifer

    Thursday, September 13, 2018 9:20 AM