locked
Showing “loading” message until asp:HtmlIframe contents fully loaded? RRS feed

  • Question

  • User1070752316 posted

    I have an Asp.net HtmlIframe control on my page as shown below.

    The source of the HtmlIframe is set in the codebehind's page load even.

    I cant seem to figure out how to display a "loading" message until the contents of the HtmlIframe are fully loaded. Can anyone help me out with this?

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script src="helper.js"></script>
        <title>Study Viewer</title>
        <style type="text/css">
            .second-row {
                position: absolute;
                top: 0px;
                left: 0;
                right: 0;
                bottom: 0;
            }
    
            .second-row iframe {
                display: block;
                width: 100%;
                height: 100%;
                border: none;
            }
        </style>
    </head>
    <body>
    <form id="form1" runat="server" width="100%" height="100%">
        <div class="second-row" runat="server">
            <asp:HtmlIframe ID="cp" runat="server"></asp:HtmlIframe>
        </div>
    </form>
    </body>
    </html>
    
    Tuesday, March 9, 2021 5:03 PM

Answers

  • User-1330468790 posted

    Hi ranasrule,

     

    The solution would be :

    1. Set the load status as "loading" when you set the src for iframe from code behind.
    2. Use Javascript to change the status using "load" event of the iframe.

     

    You could refer to below codes for more information.

    Iframe Page:

    <form id="form1" runat="server">
            <div class="second-row" runat="server">
                <asp:HtmlIframe ID="cp" runat="server"></asp:HtmlIframe>
            </div>
    
            <div>
                <asp:Button ID="reloadBtn" runat="server" Text="Reload" OnClick="reloadBtn_Click" />
                
            </div>
            <div>
                Loading State: <asp:Label ID="loadInfo" runat="server" ></asp:Label>
            </div>
    
    
        </form>
        <script>
            const iframe = document.querySelector('#<%=cp.ClientID%>');
            const reloadInfo = document.querySelector('#<%=loadInfo.ClientID%>');
    
            iframe.addEventListener('load', (event) => {
                reloadInfo.innerHTML = "Loaded";
            });
        </script>

    Iframe Code behind:

    protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void reloadBtn_Click(object sender, EventArgs e)
            {
                loadInfo.Text = "Loading";
                cp.Src = "/PageSlowLoad.aspx";
    
            }

    Page to be loaded:

     <form id="form1" runat="server">
            <div>
                Takes 2 second to load.
            </div>
        </form>

    Page to be loaded - Code behind:

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack) {
                    Thread.Sleep(2000);
                }
            }

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 10, 2021 8:11 AM

All replies

  • User-1330468790 posted

    Hi ranasrule,

     

    The solution would be :

    1. Set the load status as "loading" when you set the src for iframe from code behind.
    2. Use Javascript to change the status using "load" event of the iframe.

     

    You could refer to below codes for more information.

    Iframe Page:

    <form id="form1" runat="server">
            <div class="second-row" runat="server">
                <asp:HtmlIframe ID="cp" runat="server"></asp:HtmlIframe>
            </div>
    
            <div>
                <asp:Button ID="reloadBtn" runat="server" Text="Reload" OnClick="reloadBtn_Click" />
                
            </div>
            <div>
                Loading State: <asp:Label ID="loadInfo" runat="server" ></asp:Label>
            </div>
    
    
        </form>
        <script>
            const iframe = document.querySelector('#<%=cp.ClientID%>');
            const reloadInfo = document.querySelector('#<%=loadInfo.ClientID%>');
    
            iframe.addEventListener('load', (event) => {
                reloadInfo.innerHTML = "Loaded";
            });
        </script>

    Iframe Code behind:

    protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void reloadBtn_Click(object sender, EventArgs e)
            {
                loadInfo.Text = "Loading";
                cp.Src = "/PageSlowLoad.aspx";
    
            }

    Page to be loaded:

     <form id="form1" runat="server">
            <div>
                Takes 2 second to load.
            </div>
        </form>

    Page to be loaded - Code behind:

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack) {
                    Thread.Sleep(2000);
                }
            }

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 10, 2021 8:11 AM
  • User1070752316 posted

    thank you...works like a charm

    Wednesday, March 10, 2021 10:02 AM