Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Why is my iframe flashing / not fully loading (mostly in Chrome so it seems) all of a sudden?

Posted on 2017-08-14
28
Medium Priority
?
99 Views
Last Modified: 2017-08-15
I've been using an iframe to embed content from a 3rd party vendor for over a year now but recently, particularly in Chrome, the content on the page is flashing and not fully loading, ever, so it seems. I haven't changed my code (see below) so I'm not sure what the problem is. I'm researching solutions but they all seem very complicated at that point, if they would even work. Some involve php and I'm not familiar with that AT ALL so I don't know if that is even an viable option. Please help?

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SFATouchTasks.aspx.cs" Inherits="SFATouchTasks" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <style type="text/css">
        .page
        {
            width: 1150px;
            height: 100%;
        }        
        .header
        {
            background: #FFF;
            width: 100%;
        }        
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <div id="divEmbed" style="height: 300px;">
        <iframe id="ifm" name="ifm" width="100%" height="300%" frameborder="0" src="http://x.x.xxx.xxx:xxxx/app/main#/dashboards/589e1fed677202f430000031?embed=true"
            scrolling="auto" style="float: left;"></iframe>
    </div>
</asp:Content>

Open in new window

0
Comment
Question by:Michael Sterling
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 12
  • 3
28 Comments
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 42253942
Remember an IFrame is a container for another page. They can change their page and you will see the change regardless of the fact that you have made no changes.

Are you sure the flashing is not because of something they have changed on their side?
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42253957
That's the other option that I'm researching with the 3rd party vendor. I just want to make sure that I've done (I'm doing) everything on my end to help or better this issue. I've tried to explain/suggest that very thing (that its more than likely something on the vedor's end) to the team/manager here who we built this site for, but I want to make sure my end is covered. I've seen some links on the web that are related to this issue so I'm hoping there is something I can try on my end? Maybe a few things I can try? Any suggestions?
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254058
I need to see what you describe here

Chrome, the content on the page is flashing and not fully loading, ever, so it seems.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254066
@HainKurt: I would have to try to screen shot / capture it as it happens. Let me try to describe the behavior: The link that is embedded in the page loads a screen that contains many graphs and gauges for different metrics of inventory etc. provided by this 3rd party. As the page is loading it will all of a sudden blank out and start over (attempting to load the data). It does this repeatedly / indefinitely in Chrome, so the user never gets to see the data/graphs or the information on them as the page never fully loads or is stable. Does that help? Like I said I can try to capture it but it will be a bit tricky for timing reasons, if that makes sense?
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254077
press F12
check console for any errors when this is happening...
it may help

I dont think screenshot will help, but maybe a video...
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254079
is this happening for some users?
or it is happening to all users when they use chrome...

it may be a data issue for those users and a bug on the web site
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254081
@HainKurt: This is what I was able to capture. Hopefully these images show up in the correct order. Let me explain: The 1st image should be the page as its attempting to load the data/graphs: The 2nd page should be a partial load of the data/graphs. The 3rd image, a 2nd partial load of the data/graphs. At that point the page either flashes white and starts the cycle over again (never completely loading and or being stable). Or it just goes white.

1st image
first image
2nd image
second image partial load
3rd image
third image partial load
...after this the cycle starts over again. Does that help?
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254084
no it does not :)
but if you can provide me a demo user/password so I can login and check :)
if this is ok, send me username/pw/login as message
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254093
@JamesKurt: these are the errors i'm getting. And for all users in Chrome this seems to be an issue.

errors
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254094
when you login with another user (I see you logged in as James Neu) is it happening with same browser/machine?
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254095
@HainKurt: Even if I could give you those credentials, it wouldn't work, because you would need to be physically here (behind our firewall) to be able to login.
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254096
Yes it happens with any user, in Chrome, that logs in.
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254097
@HainKurt: Sorry I used the wrong name: "JamesKurt" above.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254099
when you double click "unexpected token < "
what do you see? where is the error coming from, whats the code that creates error?
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254188
@HainKurt: When I click on the error I get the information below. To the right, before I click on the error, you would think its a jQuery issue, but when I expand it, as  you can see in the included photo, it seems like its telling me that the HTML is broken, but I can't find any matching broken HTML in my code. When I hover over the "x", it says: "Uncaught SyntaxError: Unexpected token <"

token error
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254230
can you please copy paste first 5-10 lines from source...
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254245
Here is might site master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="Styles/Site.css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>

Open in new window



here is the page that I'm hitting (all of it):

    CodeFile="Pipeline.aspx.cs" Inherits="Pipeline" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <style type="text/css">
        .page
        {
            width: 1150px;
            height: 100%;
        }        
        .header
        {
            background: #FFF;
            width: 100%;
        }    
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div id="divForiFrame" style="height: 300px;">
        <iframe id="ifm" name="ifm" width="100%" height="300%" frameborder="0" src="http://x.x.xxx.xxx:xxxx/app/main#/dashboards/55776221a4b74978390001cf?embed=true"
            scrolling="auto" style="float: left;"></iframe>
    </div>
</asp:Content>     

Open in new window

0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254259
I dont care about your web site for now :)
I do care about the iframe source
the page that gives "unexpected token < "
copy paste whole code from that!

I noticed something here:
header says it is jquery.min.js
but it is not js file!!! looks like they are missing jQuery file

or your screenshots shows your home.aspx, not sure...
copy paste whole html rendered, not aspx code...

can you open this url?

//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254286
here is the entire page rendered:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>

</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="Styles/Site.css" />
    <style type="text/css">
        .page
        {
            width: 1150px;
            height: 100%;
        }        
        .header
        {
            background: #FFF;
            width: 100%;
        }    
    </style>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form method="post" action="./Pipeline.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWBAIBDw8WAh4EVGV4dGVkZAIHDw8WAh8ABRJXZWxjb21lOiBKQU1FUyBORVVkZGSonHESnrNEBAuxOj1F+66GE4s4uO/+rupR8qyFQQoNdA==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>



<script src="/WebResource.axd?d=37zlblbgADJgbYj0QKsmcRuu36m3FgoML3GsPdWxSmXboR2Ys_Eye6nhNk0HNAi7-g5lQmDTZyQZiIbB3hq8X2LJZAR-Q1_xR7uRU-_6Gbc1&amp;t=636160624665894255" type="text/javascript"></script>
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="0B108B2E" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAWM3RGkmCO/9yuLNxqiAv3KfchrcHwLo+/Ix6zefXK0dKX+a2Vk8cEQZ+gCRQ/wfO8PB+PaNocVaPsGR9SAUGaVXsXBjIS5MKG51M1KgDY7Md4SlUg6doxQY9NajK6V2nmzLrV1hvM3fMLUz56UMtQB" />
</div>
    <div class="page">
        <div class="header">
            <div class="title">
                
            </div>
            <div class="loginDisplay" id="loginDisplay">
                <div class="loginDisplayIII">
                    
                    
                            
                        
                </div>
            </div>
            <div id="menu" class="clear hideSkiplink">
                <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=YQNVcGUQ1ktxEQ7ue9eiNDEYStXlPtxkzgwQ1n8Gm9RLCcIVf2h7EtkjzYW7Gkjb6NY5XS9gMpamyDoKnxHGXfWbWculBXzC8y5JedLLiuk1&amp;t=636160624665894255" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
	<ul class="level1">
		<li><a class="level1" href="Index.aspx">Login</a></li><li><a class="level1" href="Home.aspx">Home</a></li><li><a title="Inventory Main Menu" class="popout level1" href="#" onclick="__doPostBack(&#39;ctl00$NavigationMenu&#39;,&#39;Inventory&#39;)">Inventory</a><ul class="level2">
			<li><a class="level2" href="Pipeline.aspx">Pipeline</a></li><li><a class="level2" href="Inventory.aspx">Inventory</a></li><li><a class="level2" href="InventoryListing.aspx">Inventory Listing</a></li>
		</ul></li><li><a title="SLS Metrics Main Menu" class="popout level1" href="#" onclick="__doPostBack(&#39;ctl00$NavigationMenu&#39;,&#39;SLS Metrics&#39;)">SLS Metrics</a><ul class="level2">
			<li><a class="level2" href="Sales.aspx">Sales by SLS</a></li><li><a class="level2" href="SoftProducts.aspx">Soft Products by SLS</a></li><li><a class="level2" href="VolumeMetricsBySLS.aspx">Volume Metrics by SLS</a></li><li><a class="level2" href="FAndIContest.aspx">F & I Contest</a></li>
		</ul></li><li><a title="Polk Main Menu" class="popout level1" href="#" onclick="__doPostBack(&#39;ctl00$NavigationMenu&#39;,&#39;Polk&#39;)">Polk</a><ul class="level2">
			<li><a class="level2" href="Polk.aspx">Polk</a></li><li><a class="level2" href="PolkSearch.aspx">Polk Search</a></li>
		</ul></li><li><a class="level1" href="SFATouchTasks.aspx">SFA Touch Tasks</a></li>
	</ul>
</div><a id="NavigationMenu_SkipLink"></a>
            </div>
            <div>
                <table align="center" width="100%">
                    <tr>
                        <td style="text-align: left">
                            <span id="lblSignedInUser">Welcome: JAMES NEU</span>
                        </td>
                        <td style="text-align: right">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a id="lkbtnLogOff" href="javascript:__doPostBack(&#39;ctl00$lkbtnLogOff&#39;,&#39;&#39;)" style="display:inline-block;width:80px;">Log Off</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="main">
            
    <div id="divForIFrame" style="height: 300px;">
        <iframe id="ifm" name="ifm" width="100%" height="300%" frameborder="0" src="http://x.x.xxx.xxx:xxxx/app/main#/dashboards/55776221a4b74978390001cf?embed=true"
            scrolling="auto" style="float: left;"></iframe>
    </div>

        </div>
        <div class="clear">
            <table align="center" class="style1">
                <tr>
                    <td style="text-align: center">
                        <h3 class="footer">
                            © Copyright Arrow Truck Sales, Inc. 2016 | 800-311-7144</h3>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <iframe id="KeepAliveFrame" src="KeepSessionAlive.aspx" frameborder="0" width="0" height="0"></iframe>
    <div class="footer">
    </div>
    
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

Open in new window


and yes I can open/browse to that .js file.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254298
I dont see any issue here
what about

KeepSessionAlive.aspx

do you have any error when you request this page directly?

also, when you do not set src property of ifm, do you get any erros?
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42254311
@HainKurt: I can access the KeepAlive page with no problem and I don't experience any issue with the page when I don't set the src property of the iFrame control. There is nothing else on that page thought so it just shows up blank but it doen't appear to be constantly reloading or attempting to constantly reload. For what ever its worth or however it may contribute to the diagnosis: I do have another page within the website that doesn't use the iFrame control, and it is stable and persists like it should.
0
 
LVL 59

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 42254414
looks like you are blocking

//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

use

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

or copy that js file to your web server and use that one...

also, remove "float=left" in iFrame "ifm"
+ make sure you run it on normal mode (not emulation or downgraded mode in IE)
1
 
LVL 1

Author Closing Comment

by:Michael Sterling
ID: 42254467
Thanks for your help with this!
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 42254879
@Michael Sterling,

I am interested to know what the actual solution was to your problem.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254881
@Julian

issues are described @ ID: 42254414 (main issue was "float=left" in iframe)
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 42255395
@JulianHansen: As a side note, this only became a problem in Chrome recently. I assume due to an updated version of the browser. Before this week and last week, the behavior/stability of the pages with the embedded links was fine.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 42255465
How was float:left making it flash?
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42255561
not a flash, but was hiding the content for whatever reason and on menu hover, the content was showing partially and disappearing...
removing float=left eliminated those issues... dont know exact reason :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question