Page load in IE, page includes flash banner - javascript

So here is the problem.
I have a flash banner consisting of two swf's which talk to each other through LocalConnection and also call external JS functions. (I haven't figured out whether this is important or just a coinsedense.)
I also have an external JS file, which tells the banner what to do through flashVars. And has the function which the banner calls on events.
As you can imagine this works everywhere allright except IE.
In IE I expirience this problem: I try to load a test page, which has a lot of pictures and a heavy background (so it takes a while to load). And i place the banner, which is added whith javascript before all that content. Something like this:
http://pastebin.com/nnTuPPhN
And sometimes usually on reload some pictures just do not appear. All text appears though.
I did try do dig through the script, but since it's not my script it prooved to be a bit difficult, finally I came to a conclusion that even though I don't like some parts of it, there are no apparent problems with it.
FireBug and Chrome, Safari, Opera debuggers show no errors of any kind.
Now as last resort I added this to my JS file
window.onload = function()
{
alert('The page has loaded completely');
};
The outcome is that when i see all the pictures i see this message, when i don't i don't. It's doesn't help to wait for the pictures to load.
I have also found this topic:
window.onload() is not firing with IE 8 in first shot
which talks about similar problem, so it would be nice if anyone specifies what addon can cause this? QUOTE: One of the IE addons created this problem, after disabling its working fine. Thanks for your time and answers :)
As long as it isn't the flash plugin=)))
I do check for flash plugin on page this way:
var ad_checkPlugin = function(){
// From SWFObject v2.2 <http://code.google.com/p/swfobject/>
if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object")
{
d = navigator.plugins["Shockwave Flash"].description;
return (d && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin))
}
else if (typeof window.ActiveXObject != "undefined")
{
try
{
var d = new window.ActiveXObject("ShockwaveFlash.ShockwaveFlash").GetVariable("$version");
// new window.ActiveXObject(...) will return null if ActiveX is disabled
return d?true:false;
}
catch(e)
{
return false;
}
}
}
And there was another way which caused the same problems in Ie, so i guess it's not the problem with the plugin check.
I would be happy if you tell me general things which can cause such problems, i can also ad the script if you guys ask for it.
And i will be even happier if you tell me specific things=)) , if you're going to say that problems lie whithin the script I will no be able to agree or disagree I've cheked and see no problem, browsers see no problems too. But it must be there somewhere since it doesn't work.
UPDATE: I also have alerts every where in my JS now, now what i witness is this: in FF for example sometimes i see the alert
alert('The page has loaded completely');
but I am not left any time to click this one(click ok), when another alert pops up. Is that a normal thing for alerts? I should add that many of the alerts are in function called by the banner.
UPDATE no2:
I've isolated the problem even more I stopped any calls from flash to JS functions at all (First i tried to replace them with alert("hello world"); that didn't help the loading problem).
Now when flash doesn't call to JS the page loads just fine. Of course i need the flash to call external functions.
Anyway NEW QUESTION : could javascript called from flash make IE think that everything is loaded and it can stop, that is can it be something like:
clean your room (and two seconds later)
now brush your teeth
result: the room is half clean but the teeth are
I might add that whatever loads on the page, some things load always: text, spaces fo future pictures but that may just be a coincedence, apart from this there is no system at all to what has, and what hasn't loaded.
---------------------------> ANWSER FOUND
Thanks))) for voting for my question, and here is the anwser guys! The function used in flash namely
getURL("javascript: ...","");
is what actually stops the page from loading! Hm, rather than this it's better to use ExternalInterface(); I'll point out we are talking about AS 2.0 in AS3.0 there is no question that ExternalInterface should be used, since getURL is now navigateTo or smthg.
Thanks to the guy who wrote this AS to realise what the problem was=)

Just copying anwser from above so the question is solved
The function used in flash namely
getURL("javascript: ...",""); is what actually stops the page from
loading! Hm, rather than this it's better to use ExternalInterface();
I'll point out we are talking about AS 2.0 in AS3.0 there is no
question that ExternalInterface should be used, since getURL is now
navigateTo or smthg.

Related

Disabling javascript code on iPad only

I have a pretty large script in my page that seems to be crashing my site on iPads. It's a vertical image carousel that runs on intervals and it involves 5 functions. I can remove the script and then the site loads fine on iPad but the carousel no longer works (which is OK on ipad).
How can I disable this script on iPad?
I tried using this: http://davidwalsh.name/detect-ipad
basically:
<script>
var isiPad = navigator.userAgent.match(/iPad/i);
if ( !isiPad ) {
//large script goes here with multiple functions
}
</script>
Do I need to wrap each individual function in "if ( !isiPad ){} ? Is there any way I can only allow the entire script to run if the device being used is NOT an ipad?
Thanks in advance for help!
The full script can be seen here: https://jsfiddle.net/hf9tf7rs/
You've got the right idea! Just about any solution to this problem will involve using JS to detect the device or relevant browser feature and set a flag (like isiPad) which you can use in your code to turn on/off relevant bits of code.
A couple of things might improve this approach slightly, however:
If you can identify exactly what it is about the carousel that's acting up on iPad, you may be able to identify just one function that needs the isiPad conditional. E.g., if there's a $('#carousel').initCarousel() call somewhere, just wrap that one call in a conditional and you're done! If the carousel code is scattered around the codebase, see if you can't refactor it somehow to create a single bottleneck where you can put the isiPad check. An initialization block is a great spot for this. I can't be more specific without seeing your code, but if you find yourself repeating the if ( !isiPad ) {} block more than 2-3 times, take that as a red flag to seek a more central spot for it.
If you can identify which feature of the iPad's browser/bandwidth/CPU/GPU is causing the problem, you may be to use Modernizr (http://modernizr.com/) or a similar feature detection library to solve this problem on other similar devices. What appears to be an iPad bug is very frequently reproducible on other mobile tablets, and only checking for /iPad/i may leave the bug live on other devices.
Another user had asked beforehand how to conditionally load scripts.
With this in mind, what you could do is as follows:
<script>
var isiPad = navigator.userAgent.match(/iPad/i);
if ( !isiPad ) {
// Append the new <script> tag to <head>
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "insert-source-path-here.js";
head.appendChild(js);
}
</script>

Image removed but still using network traffic

I have a strange problem here, and i can't find any usefull results using google search, so I now ask for your help.
I have a video stream on my HTML+Javascript(mostly jQuery) application.
It is embeded like this:
<img width='300' id='videoFeedImg' src='http://IP:PORT/PAGE' />
Where this PAGE is acutally a live updating stream of pictures.
It works great!
But the problem is, that it is used on a page where it only has to be displayed when the user clicks a button. This is no problem, I just create this image shown above with the append() function in jQuery.
When the button is clicked, it is created and it is shown in the Inspection tool under Network (and it is easy to see in the Task manager Nerworking page to), and is making pretty huge network traffic.
But no matter what i do, i can't kill this stream/bandwidth. I tried to:
1. replace src with someting else
2. remove the picture
3. detach everthing i attached
4. use all kinds of jQuery functions like .stop() on the image and .empty() and .html(""); on the parent .
The only thing that works is this:
if (window.stop !== undefined) {
window.stop();
}
else if (document.execCommand !== undefined) {
document.execCommand("Stop", false);
}
But it is kind of drastic (maybe not??)
Does anybody have any good idears on how to stop this from loading/downloading?
Best regards
Bjarke

How to detect where JavaScript alert is coming from?

I am trying to debug a very complex IE Intranet application. I am getting an alert with a custom message stating that an exception has occurred. I would like to find out more information about this exception as the message is not very helpful.
There is a master page which contains a lot of iFrames (and .htc files if that makes a difference) so I don't think that I can try and hijack window.alert. My last resort will be to try my luck with a file search.
Using IE 8, is there anyway I can detect where this alert is coming from? The ideal solution would be to somehow create a "breakOnAlert" function which inserts a debbuger statement at the correct alert location.
To clarify: The master page contains many iframes and I believe that the error+alert is coming from one of these. Each iframe is an aspx page (sometimes with dynamic html/javascript from the user) and contains inline and external JavaScript. Before posting I did try overriding alert in my page (a child page inside an iframe) but it didn't work. I am assuming that It doesn't work as each iframe has their own window object so they each have their own version of alert. For this to work I would need to find all iframes and override it for each one, something which I think would be very complicated to do. In the IE developer tools I can see a huge amount of script files (inline and external), so it would be very difficult to manually look for the alerts in there.
Since it's a real chore to do it in all iframes, I'd probably use Fiddler and programatically replace alert( with something like:
(function(n){alert(n);debugger;})(
IE should support the debugger statement, so you'd have a call-stack
This page explains how to do a text-replace in Fiddler
Example Fiddler custom rule to add to OnBeforeResponse:
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html"))
{
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
oBody = oBody.replace(/alert\(/gi, "(function(n){alert(n);debugger;})(");
oSession.utilSetResponseBody(oBody);
}
Ovveride alert function and set a breakpoint inside, then you can watch Stack Trace :)
function alert(message) {
var x = 'whatever';
}
$(function () {
alert('test');
});

Appending an element created as an object property

I have a script which appends a newly-created div to the body element onload. I need to keep a reference to that div throughout the application, so I store it in my main global object.
var oMyObj = {};
window.onload = function () {
oMyObj.eDiv = document.createElement("div");
document.getElementsByTagName("body")[0].appendChild(oMyObj.eDiv);
};
Nothing particularly ground-breaking, I'm sure you'll agree. Anyway, it worked absolutely fine until I started testing in IE9. All of a sudden I get an error message saying "オブジェクトの呼び出しが無効です" (I'm currently working in Japan), which sort of translates to "the object call was null/invalid". Not sure what the precise English version of the error message is.
Anyway, I searched and found (http://d.hatena.ne.jp/wang-zhi/20110503/1304361114 - sorry, also in Japanese) that it was due to the RealPlayer DivX plugin. After disabling the plugin, it worked fine. It also works fine if I use a meta tag to force IE9 to run as IE7. So it is not a major problem. But I would like to know if there is a "correct" way to do what I am trying to do so that it will work in IE9 as IE9. I can only assume that what I am doing now is not what I'm supposed to be doing.
Any ideas?
Okay, well I have confirmation that it was the DivX (not RealPlayer; no idea why I mixed them up) Plugin causing the problem. The plugin overwrites some of the core DOM functionality, including appendChild, which seems insane to me, but whatever. DivX acknowledged the bug and are apparently going to fix it in the next update. Yay, I guess.

Detecting cause of IE's Operation Aborted Issue

My site is suffering from the Operation Aborted error. What I find weird is that in my case the error only sometimes happens. The site has been running fine for three months then today it starts happening but not every time.
The page this is occuring on is rather large with a lot of third party controls. What I'd like is a tool that could pinpoint where the failure is occuring. Seems like the best I can do is find the first javascript error that occurs after the operation aborted; however, this doesn't help much. This failure is because an element of the dom isn't available which I'd expect since IE stopped parsing the HTML.
Any one have any ideas or tricks to narrow this down?
Edit
I appreciate additional ways to resolve the issue; however, what I am looking for is a way to identify which script is causing the issue.
Final Edit
After switching to IE8, I was able to determine the cause was the AjaxControl Toolkit's modal popup dialog. There was no concrete way to determine this which is dissapointing, but the debugger let me see where it was failing which was very consistent. Since there is no way in the control to tell it to move its initialization, I disabled it, and have the script to create the client side control in my document load event handler.
This issue is no fault of the control, it was occuring because the content for the popup is actually in a second form. Frankly I'm surprised it ever worked.
Do you have any javascript that is manipulating the DOM, as the case is described at http://support.microsoft.com/kb/927917#more_information ?
Try moving all script blocks to the very bottom of the page, just before the </body> tag, and don't try to set the innerHTML property of the body tag itself.
If the problem is with javascript executing before the DOM is fully built, try moving any initialization calls into a function that will run only after the page is fully loaded. So, instead of something like this:
<div class="myWidgetControl"/>
<script type="text/javascript">
initializeWidgets();
</script>
Try something like this:
<div class="myWidgetControl"/>
<script type="text/javascript">
$(document).ready(
function () { initializeWidgets(); }
);
</script>
You can use script provided by IE Blog to investigate the problem. See: http://blogs.msdn.com/ie/archive/2009/09/03/preventing-operation-aborted-scenarios.aspx
This is a nifty trick I used (based on the link in the JS comments below) that completely avoids the Op Ab error without affecting performance in other browsers. You first wrap whatever script you're doing that can cause the error (for instance, loading/instantiating a 3rd-party widget) in a function, then call that function within the delayExecutionForIE function -- note that the call to myFunction is in there twice, once for IE and once for nice browsers.
Your 3rd-party script might prevent this working, depending on exactly what it does and how it expects to be loaded, but it's definitely worth a try.
function delayExecutionForIE() {
if ( typeof document.all == "object" &&
(document.readyState != "loaded"
&& document.readyState != "complete")
) {
try {
//If IE is used, use the trick by Diego Perini
//http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
myFunction();
} catch(error) {
setTimeout(delayExecutionForIE, 200);
}
} else {
myFunction();
}
}
function myFunction() {
//this is your function that manipulates the DOM
}
delayExecutionForIE();
in the most cases it is a DOM issue in JS.
$( element ).append( someHtml );
so in IE you can add content to a object only if it has it's closing tag
For example the code below will cause the IE7 to bring the message "Operation aborted"
<div id="o">
...
$(o).appendChild();
...
</div>
And the right way
<div id="o">
...
</div>
$(o).appendChild();
Although IE8 will no longer cause that error to "crash" the rendering entirely, instead logging an error, it is unfortunately not caught by the JavaScript debugger found in the new Developer Tools, and the error message doesn't tell you where the error really occurred.
A workaround, which is certainly tedious, but could locate the issue, is to use IE8's debugger to put a breakpoint on the very first piece of JavaScript code that is run, and then continue hitting the "Step" button until the error icon pops up in the bottom left corner of the browser. When that happens, you know the line of code that causes the error was the one highlighted just before you clicked step. It's likely to be quite a bit of code you'll be stepping through, though, but I can't think of anything else (well, except contacting the vendors of that 3rd party code and seeing if they have any updates that might be related).
Of course, you could just tell your users to upgrade to IE8. ;)
And Microsoft does recommend upgrading to IE8!

Categories