I am attempting to show a simple mockup to a potential client of how he could stream media from his own online radio station to a page. The radio station was built using an external site and in Safari rendering the station's share link in an iFrame works perfectly, and plays immediately on page load without the user having to do anything. Here is the pure html code; there's no JS for this page now:
<iframe src="https://lucasdraft.out.airtime.pro/lucasdraft_a" frameborder="0"></iframe>
The CSS:
iframe {
height: 50px;
width: 200px;
float: right;
}
But in Chrome, half the time when I try to load the page the iframe doesn't show up at all and the page loads continuously with the status at bottom left displaying "Waiting for available socket"- again this never happens on Safari. When it does load in Chrome, instead of showing the basic media player from the external source it shows a sort of gray semi-circle with three dots. If I click this gray blob it begins playing, but this is very un-intuitive to a user not to mention ugly. I assume this is a security feature in Chrome but haven't found any reliable way of fixing it. Increasing the size of the iframe does not change anything.
Safari (working as expected):
Chrome loading error:
Chrome with cache cleared, after loading the iframe:
Thanks and anything helps in fixing this pesky error!
For the Waiting for available socket, a quick google search got me this answer. Chrome hangs after certain amount of data transfered - waiting for available socket It's always a good idea to google something before asking.
For the visual problem. the Url in your Iframe is calling a video. Different browsers use different style for their video player. Chrome just needs a little bit more height. I find that 100px works well.
I had the same issue(Worked in safari but not in chrome). In my case the issue was the Ad-blocker . Ad-blocker usually writes scripts to override the iframe styles.
Once I disable the ad-blocker or load the project in incognito(private browser) window the iframe content loaded successfully.
Related
I have been using an iframe to embed content from a different site (on the same domain) into a web page. Up until now, my clients have been accessing the site using Internet Explorer 7 and everything has been working completely fine...they click a button, the iframe src property is updated and the content is loaded.
After some recent software changes, the clients are now required to access the web page in IE 8/9/10. When they click the button in any of these later version of IE however, the client page IS successfully loaded into the iframe, but only for a very brief period (less than half a second). Essentially the page is loaded but then immediately unloaded - I tested this was the case by displaying some alerts when the window load/unload events are fired.
I have tried and failed to find the cause of the problem using the browser debugging tools. I can't see any errors (or warnings for that matter) relating to the issue, and the rest of the site is functioning normally. I am aware that there have been several changes to the way iframes are handled in later browser versions, but I'm not sure whether this is the cause of the behaviour that I am observing. Is it possible that the newer browser versions are telling the iframe to unload?
Does anyone have any ideas as to what might be causing this problem (am I even on the right tracks here)?
Any help would be greatly appreciated.
Just so that you are aware, this behaviour is reflected in both Chrome and Firefox (these are also going to be supported).
Edit:
For the sake of testing I have been injecting a very simple html file as the client page and I still experience the exact same problem:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function clickFunction() {
alert("Hello World!");
}
</script>
</head>
<body>
<button id="myButton" onclick="clickFunction()">Click Me</button>
</body>
</html>
This html is injected into an iframe that is embedded on my web page. As far as I am aware there is nothing unusual about the iframe:
<iframe id='geode_iframe' style='width:100%;height:100%;left:0;top:0;position:fixed'></iframe>
When the button on my page is clicked, the following code is used to set the src of the iframe:
document.getElementById('geode_iframe').src='http://BI0002/IRSGeodeClient/Basic.html'
In theory this operation should be relatively straightforward, hence why I thought it more likely that I was unaware of some change in iframe behaviour.
I have managed to track down the cause of the problem at long last. The panel in which the iframe was embedded was actually being created twice, which I think was confusing the browser when I called document.getElementById (since I had two panels with the same id).
I'm not sure exactly why this behaviour was occurring...perhaps IE7 and IE10 use a different post back model and I was getting an extra postback which was causing the creation code to execute again.
Thanks anyway.
Info:
Screen Readers: Jaws 14, Apple Voiceover
Browsers: IE, Chrome, Firefox
So I have a web flow that I'm trying to make accessible via screen reader. Now it is composed of multiple vms. In the header there is a skip to main content so user can skip the redundant header that shows up on each page of the flow. My issue is the main body of the page gets ignored by the screen reader. I was able to use the following code to bring attention to the content and the screen reader will read from there.
<script language="javascript">
function reload() {
window.location.href = "#page1";
}
</script>
then a tag to use as a anchor as follows:
<a name="page1" id ="page1></a>
This works great and all BUT now it skips over the header of the page.
So my question would be, is there a way to make focus to go back to the top of the page or a better way to force that content to be loaded to the screen reader will read it in a linear fashion?
I only have this problem in IE (yep who would of expected that). Voiceover and Jaws 14 has no problems in any other browsers.
Hopefully this description is clear, if not I can try to elaborate more if needed.
Thanks for your time, its greatly appreciated!
It sounds like you are updating content, inferred by the main body being ignored, in which case you might want to check out live regions https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions to communicate the update.
If main text is failing to voice when following the skip link without a dynamic update please post the HTML.
I have a website where sometimes it loads quickly, however sometimes it seems as though the page has stopped loading half way through, possibly due to a script.
The website is http://www.pinspired.com - The tabbed sidebar on the right is the problem. I am using a simple jquery tab plugin and twitter and facebook script in the tabs.
Firstly, does the page load quickly for you?
How can I find out which script is stopping the rest of the page loading. It is hard to test as it only happens occasionally.
Thanks in advance.
I just ran the dev tools and it looked like the jquery.carousel plugin is what took the longest.
That aside, my feeling is that you should reconsider using an iframe to load in the carousel. I do know that multiple iframes on a page can slow the page down. And considering the size of the content you are loading inside that iframe, it might explain the delay. You might want to do some research on iframes and consider the order in which iframes are loaded into the DOM.
Your site's loading fine here.
For the Facebook "Like Box", consider using the iframe version.
http://developers.facebook.com/docs/reference/plugins/like-box/
After clicking the "Get Code" button, select "IFRAME". This may remedy your issue.
I suggest you have a look at the chrome developer tools. You can see how long it takes to load each resource (87 request just to load the landing page - wow!), you can profile scripts to see if something takes very/too long and you can even do an audit and let it check several things you can possibly optimize.
For example
merge the javascripts you are loading from the same domain
set the webserver to use gzip to send script/html files compressed
many resources are explicitly set to be not cachable; for example all the product images and the social media pins (preventing that they are loaded over and over again and will speed up things a lot after the they first page load)
merging images like the social media pins and use css sprites
provide different/only the needed css scripts for each site; according to chrome almost 300kb of css rules are unused on the frontpage
You can find out all that stuff usign the Chrome Developer Tools. All you need is Chromium/Google Chrome.
If it is really the facebook script couldn't you just add a slight delay before loading the fb plugin? Like 500 - 1000ms or so after everything else (well most of it) is loaded.
EDIT: The answer drewcode posted is right. It looks like jquery.jcarousel is causing the delay. See here:
I'm using the plain iframe codes, NOT xfbml (was getting fragments appended so reverted to basic iframe).
<iframe scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; width: 92px; height: 22px; position:absolute;top:3px;left:180px;" allowtransparency="true" src="http://www.facebook.com/plugins/like.php?href=http://www.xxxxwebsitexxxx.co.uk&layout=button_count&show_faces=false&width=92&action=like&font=arial&colorscheme=light"></iframe>
The button displays correctly but upon clicking it in firefox, i get the following error:
this.event is undefined
http://static.ak.fbcdn.net/rsrc.php/v1/yW/r/MrPDat_Xp7Z.js (line 31)
I think the offending line is this:
__d("DOMEvent",["copyProperties"],function(a,b,c,d,e,f){var g=b("copyProperties");function h(i){this.event=i||window.event;this.target=this.event.target||this.event.srcElement;}g(h.prototype,{preventDefault:function(){var i=this.event;i.preventDefault?i.preventDefault():i.returnValue=false;return this;},stopPropagation:function(){var i=this.event;i.stopPropagation?i.stopPropagation():i.cancelBubble=true;return this;},kill:function(){this.stopPropagation().preventDefault();return this;}});e.exports=h;});
__d("DOMEventListener",[],function(a,b,c,d,e,f){var g,h;if(window.addEventListener){g=function(j,k,l){j.addEventListener(k,l,false);};h=function(j,k,l){j.removeEventListener(k,l,false);};}else if(window.attachEvent){g=function(j,k,l){j.attachEvent('on'+k,l);};h=function(j,k,l){j.detachEvent('on'+k,l);};}var i={add:function(j,k,l){g(j,k,l);return {remove:function(){h(j,k,l);j=null;}};},remove:h};e.exports=i;});
Is this a known issue, i've tried the same code in a plain website as well as disabling all add-ons to make sure it's not compatability problems.
I'm using firefox 12.0 on a mac.
I'm facing same issue but I have not done any mods so I think it's facebook fault as this is very straightforward (just copy from FB and paste in your site) and it works in IE, Chrome and Safari (So far I've tried)
But there's no such issue if you are already logged in FB. Let's try to contact FB to let them know.
As of May 3rd 2012, 22:14 (GMT+1) it appears this problems has been fixed by Facebook.
I checked the javascript the iframe implementation pulls in and the offending line of code has been changed.
When I now click on the facebook like button, the popup displays as it should.
All I can say is that I don't have this issue in Firefox when I logged on Facebook first, so something must go wrong when trying to load the login popup from facebook? I bet Facebook will resolve this issue soon, since it affects simply any website using the iframe version of the like button.
Edit: The problem seemed to be fixed by Facebook, but as of today the problem is back. Perhaps Facebook has changed something else back which caused this problem to occur again?
I have a resource intensive ASP.NET page. I have a div element with an image that I set the visibility for before and the after the page loads. This fails in IE. IE stops animating the image.
I have tried all possible solutions that were presented in different message boards with no luck.
Any help is really appreciated.
My guess is your are using an UpdatePanel and IE is pegged trying to parse the DOM. See this article for KB 2000262 - Fix: UpdatePanel Async Postbacks Slow in Internet Explorer. Check your task manager when this happens and see if IExplore.exe is %100.