爲什麼Iframe沒有第二次加載？

Question

我想通過點擊一個按鈕來使用fancybox Iframe加載一個網站，它第一次運行得非常好，當它第二次嘗試加載它的劑量時工作。

如果我嘗試從內容模板中刪除按鈕以及ahref，並將它放在外面，則Iit會顯示一個空白Iframe，其餘代碼正常工作。 這裏是我的代碼：

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#various3").fancybox({ 
      'width': '75%', 
      'height': '75%', 
      'autoScale': false, 
      'transitionIn': 'none', 
      'transitionOut': 'none', 
      'type': 'iframe' 
     }); 

     $('#<%=txtWebsiteAddress.ClientID%>').change(function() { 
      $('#various3').attr('href', $(this).val()); 
     }); 


     $("#<%=btnShowThumbnailImage.ClientID %>").click(function() { 

      $("#various3").trigger('click'); 

     }); 
    }); 
</script> 

這是我的標記：

Width:<asp:TextBox ID="txtWidth" runat="server">320</asp:TextBox> 
    Height:<asp:TextBox ID="txtHeight" runat="server">240</asp:TextBox> 


    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
    <li><a id="various3" href=""></a></li> 
    <asp:Button ID="btnShowThumbnailImage" runat="server" Text="Button" OnClick="btnShowThumbnailImage_Click" /> 
    <asp:Image ID="imgWebsiteThumbnailImage" runat="server" Visible="false" /> 
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0"> 
    <ProgressTemplate> 
    <img src="images/Loader.gif" alt="loading" /> 
    </ProgressTemplate> 
    </asp:UpdateProgress> 
    </ContentTemplate> 
    </asp:UpdatePanel> 

Answer 1

您的UpdatePanel的更新後

，你需要重新初始化您的JavaScript，因爲UpdatePanel的運行後，在DOM更改。這可以通過UpdatePanel上包含的兩個函數來完成。使用這2個調用，您可以在頁面加載時重新初始化您的FuncyBox，然後在每個UpdatePanel上重新初始化。

<script type="text/javascript"> 

    var prm = Sys.WebForms.PageRequestManager.getInstance();  
    prm.add_initializeRequest(InitializeRequest); 
    prm.add_endRequest(EndRequest); 

    function InitializeRequest(sender, args) {  
    } 

    function EndRequest(sender, args) { 
     InitMyFancyBox(); 
    } 

    $(document).ready(function() { 
     InitMyFancyBox(); 
    }); 


    function InitMyFancyBox() 
    { 
     $("#various3").fancybox({ 
      'width': '75%', 
      'height': '75%', 
      'autoScale': false, 
      'transitionIn': 'none', 
      'transitionOut': 'none', 
      'type': 'iframe' 
     }); 

     $('#<%=txtWebsiteAddress.ClientID%>').change(function() { 
      $('#various3').attr('href', $(this).val()); 
     }); 


     $("#<%=btnShowThumbnailImage.ClientID %>").click(function() { 
      $("#various3").trigger('click'); 
     }); 
    }  
</script>