console.log(this.contentWindow.location) 在 JQuery 脚本中不起作用

Question

I am trying to achieve something with modal pop up.

I have a modal pop up in page A in my site which will open page B on the modal pop up, and inside the same modal pop up, page B will perform a task and then redirect to page C which will contain in the same modal pop up. Here I want to disable the "Close button" in the modal pop up when page B is active, and enable it when page C redirected.

below is the Jquery code I used, when I run the code, the pageB loads, the button hides, then when pageC loads, but the button will not show.

NB: my page use master page, and I have Scriptmanager in masterpage

Please who can find the error in this code.

<script src="Scripts/jquery-3.4.1.min.js"></script>   
    <script src="Scripts/MicrosoftAjax.js"></script>

   <script type="text/javascript">
       function displayFrame()
       {
           $("#<%=Irm1.ClientID%>").attr("src", "pageB.aspx");
           $("[id*='Button2']").hide();
           $("#<%=Irm1.ClientID%>").on("load", function () {
               console.log(this.contentWindow.location);
               if (this.contentWindow.location.pathname == "/pageC.aspx") {
                   $("[id*='Button2']").show();
               }
           });
       }
   </script>

<asp:Button ID="btpageA" runat="server" OnClientClick="displayFrame()" Text="show page B" Width="99px" BackColor="#6699FF" Font-Bold="True" ForeColor="White" Height="38px" />

     <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="btpageA"  
    CancelControlID="Button2" BackgroundCssClass="Background">  
</cc1:ModalPopupExtender>  
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">  
    <iframe style=" width: 370px; height: 300px;" id="Irm1" runat="server"></iframe>  
   <br/>  
    <asp:Button ID="Button2" runat="server" Text="Close" />  
</asp:Panel>

Answer 1

Place the onload event before changing the src:

function displayFrame() {
    $("#<%=Irm1.ClientID%>").on("load", function () {
        console.log(this.contentWindow.location);
        if (this.contentWindow.location.pathname == "/pageC.aspx") {
            $("[id*='Button2']").show();
        }
    });
    $("#<%=Irm1.ClientID%>").attr("src", "pageB.aspx");
    $("[id*='Button2']").hide();
}

And if it still doesn't work check if is there any error in the javascript console. If the iframe content is from another domain web browsers don't let you access to its properties.