asked on

iframe onload event not firing in safari and chrome

EE,

iframe onload event not firing in safari and chrome...

The onload event does not fire when page is loaded. TabPanel tp_1 should be populated and not blank.

You can see the content if you hit TabPanel tp_3 and then TabPanel tp_1 again.

How can I make this work in safari and chrome. It does work in firefox and IE.

ps: TabPanel tp_2 has a different unrelated problem in the src page, I am working on it currently.

Thank You Sam

http://vince.orodev.com/debug/scratch_debug.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Scratch_Debug.aspx.cs" Inherits="WebApplication1.Debug.Scratch_Debug" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .IframeSize {
            height: 850px;
            width: 100%;
        }
        
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <ajaxtoolkit:toolkitscriptmanager ID="ToolkitScriptManagerManage" runat="server">        </ajaxtoolkit:toolkitscriptmanager>
    <div>
        <ajaxtoolkit:TabContainer ID="tc_1" runat="server" ActiveTabIndex="0"  Width="100%" Height="900px">

            <ajaxtoolkit:TabPanel ID="tp_1" runat="server" HeaderText="tp_1" OnClientClick="LoadIframe('Iframe_1', 'Message_Debug.aspx')">

                <HeaderTemplate>tp_1                </HeaderTemplate>
                <ContentTemplate>

                    <%--iframe onload event not firing in safari and chrome--%>
                    <iframe id="Iframe_1" src= 'about:blank' class="IframeSize" onload="LoadIframe('Iframe_1', 'Message_Debug.aspx')">            </iframe>

                </ContentTemplate>
            </ajaxtoolkit:TabPanel>

            <ajaxtoolkit:TabPanel ID="tp_2" runat="server" HeaderText="tp_2" OnClientClick="LoadIframe('Iframe_2','Locks_Debug.aspx')">
                <HeaderTemplate>tp_2               </HeaderTemplate>
                <ContentTemplate>
                    <iframe id="Iframe_2" src= 'about:blank'  class="IframeSize">             </iframe>
                </ContentTemplate>
            </ajaxtoolkit:TabPanel>

            <ajaxtoolkit:TabPanel ID="tp_3" runat="server" HeaderText="tp_3" OnClientClick="LoadIframe('Iframe_3','TreeView.aspx')">
                <HeaderTemplate>tp_3                </HeaderTemplate>
                <ContentTemplate>
                    <iframe id="Iframe_3" src= 'about:blank'  class="IframeSize">             </iframe>
                </ContentTemplate>
            </ajaxtoolkit:TabPanel>
        </ajaxtoolkit:TabContainer>
    </div>
    </form>
    <script type="text/javascript">
        function LoadIframe(Iframe, url) {
            alert("@ LoadIframe -->" + Iframe + "<--" + "\n url -->" + url + "<--");

            var ele = document.getElementById(Iframe);

            //if undefined this is the first time, so load Iframe and initialize parameter so it dosen't happen again
            if (ele.IsLoaded == undefined) {
                alert("Iframe.IsLoaded = undefined ");

                document.getElementById(Iframe).src = url; //"Message_Debug.aspx";

                ele.IsLoaded = true; //create and set custom attribute
                //alert("Iframe.IsLoaded set -->" + ele.IsLoaded + "<--");
            }
            else {
                alert("Iframe.IsLoaded is defined "); //do nothing...
            }
        }
    </script>
</body>
    
</html>

Open in new window

ASKER CERTIFIED SOLUTION

SamCash

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial