SWFObject fails to embed flash in IE - javascript

Been trying 4 hours to solve this out.
I've a really strange problem: SWFObject embeds flash good in all browsers except IE.
I printed the HTML of each outputted div into a textarea, and found out that in IE, SWFObject embeds the root "object" tag only, without any inner tags (such a param name="movie" value="myVal"), so I guess this is why I get "movie not loaded" in IE.
My code as follows:
window.embedFlash=function (properties)
{
swfobject.addDomLoadEvent(function ()
{
swfobject.createSWF(
{
data: properties.data,
width: properties.width||'100%',
height: properties.height||'100%'
},
{
allowScriptAccess: 'always',
allowFullScreen: 'true',
allowNetworking: properties.allowNetworking||'all',
flashvars: properties.flashvars||null,
wmode: properties.wmode||null,
menu: properties.menu||'false'
},properties.id);
});
};

Usually "movie not loaded" means Flash Player AVM instance has started, but the URL you provided can't be found.
Also, your SWF version may be out of sync with the Flash Player version in IE.
Check if you get any 404s and check if the compiled SWF version is runnable in the FP version installed to IE.

You're basically recreating the swfobject.embedSWF method, so I suggest reformatting your code to use swfobject.embedSWF, as it is widely supported and heavily tested. The only differences I see between your code and embedSWF are:
lack of version detection in your
code (embedSWF requires you to
specify a minimum version of Flash
Player
lack of expressinstall in your
code (this can be set to false in
embedSWF if you're not interested
your flashvars variable is probably
formatted as a string, whereas embedSWF
expects an object containing key/value pairs
swfobject.embedSWF gets invoked on domload by default, so you wouldn't need to write an ondomload handler
Here's a quickie reformat of your code. It will fail if your flashvars are sent as a string:
window.embedFlash=function (properties)
{
var flashvars = properties.flashvars||false;
var params = {
allowFullScreen: 'true',
allowNetworking: properties.allowNetworking||'all',
allowScriptAccess: 'always',
menu: properties.menu||'false',
wmode: properties.wmode||"window"
};
var attributes = {};
swfobject.embedSWF(properties.data,
properties.id,
properties.width||'100%',
properties.height||'100%',
"9",
false,//URL for expressinstall, if available
flashvars,
params,
attributes);
};

Related

Reliable Javascript way to do feature/object detection for SaveAs dialog in IE

I'm looking for a cross-browser solution to display a "Save As" dialog in Javascript. I had been using this method in a previous project, but it's broken in IE 11 (because the window.ActiveXObject has changed and IE 11 now slips into the first conditional below):
function saveFile(fileURL, fileName) {
if (!window.ActiveXObject) {
// Non-IE
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
save.download = fileName || fileURL;
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0,
false, false, false, false, 0, null);
save.dispatchEvent(evt);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
} else if (document.execCommand) {
// IE
var _window = window.open(fileURL, "_blank");
_window.document.close();
_window.document.execCommand('SaveAs', true, fileName || fileURL)
_window.close();
}
}
My understanding is that the IE team did this intentionally to prevent using this method for browser detection. Can I use some other kind of feature/object detection to make it work again. Or can I (preferably) remove the conditionals and just have one piece of code for all browsers. When the first conditional runs in IE, the error I see is:
DOM7001: Invalid argument 'url'. Failed to revoke Blob URL: '[the url...]'.
File: localhost:8080
I know that browser detection is an option (like WhichBrowser, for example) but even the author of that warns that feature/object detection really is the way to go.
I think it's probably a better solution to just embed a hidden iFrame in the HTML body and have the JS set the src of the iFrame to the URL. Once the src is set, that'll immediately trigger the Save-As dialog if the src URL wants it to e.g.
<body>
...
...
<iframe style="display:none" id="hidden-iframe"></iframe>
</body>
and...
document.getElementById("hidden-iframe").src = myURL;
Seems to be working in all the browsers I've checked so far, including IE (gasp!).
Just My 2 cents, but your problem as posted is really how to test for link download support. Since you're not actually using ActiveX, you shouldn't use it to detect the feature. It's not far off from testing against the user agent.
Instead verify that the anchor's download attribute is not of type string (which it will not be in trident browsers). Then execute your IE "save as" code.
The problem I'm having at present is just evoking document.execCommand('SaveAs') is crashing IE 11 100% of the time.
Might want to try using msSaveBlob if something like this is what you are looking for in IE.

Access native JSON object when JSON2 has overloaded it

I am implementing a bookmarklet which communicates with a iframe through a JSON-RPC protocol.
However some sites, such as cnn.com load JSON2 into window.JSON although the browser already has a native JSON object.
The problem is that within my iframe I would not like to follow the same bad practice, and JSON2 does not seem to be compatible with the native JSON on Mozilla Firefox and Chrome:
So when I run stringify on the native JSON and JSON2, I get the following results:
JSON.stringify({key: "value"})
JSON2
{key:"value"}
Native JSON
{"key":"value"}
(Key is wrapped in ")
The problem is that the native JSON does not like it when the " is missing in the JSON2-produced string and throws an error:
Mozilla Firefox: SyntaxError: JSON.parse: expected property name or '}'
Google Chrome: SyntaxError: Unexpected token k
To solve the problem for good, I need to make sure that I use the same JSON library to encode the string as I do for decoding it.
One way of doing it is to make sure to use JSON2 or JSON3 on both sides, but I'd like to use the native json library where possible.
So now that sites like cnn.com have overriden the native JSON library, how can I get back to it?
I could perhaps create an iframe that points to the same domain and fetch the JSON object from its contentWindow, but that would be highly inefficient.
Isn't there a better way?
not sure if i understand your problem correctly
if you place an empty iframe like this
<iframe id="testFrame" name="testFrame" src="about:blank" style="display:none;"></iframe>
then you can also call from js
testFrame.JSON.stringify(obj);
the only problem is that if you use it in https: src could be javascript:false if you need to support IE6
EDIT: I still think i don't deserve the answer being accepted, so i've come up with a modified version of your code
(function($) {
var frm;
$.getNative = function(objectName, callback) {
if (!frm) {
frm= $("<iframe>", {
src: "javascript:false",
style: "display:none;"
}).appendTo("body").load(function(){
callback(this.contentWindow[objectName]);
// $(this).remove(); <-- this is commented to cache the iframe
});
}
callback(frm[0].contentWindow[objectName]);
}
})(jQuery)
this will enable you to use $.getNative() multiple times in a document without recreating the frame each time.
So far the best solution is to use an iframe, but as Crisim Il Numenoreano has pointed out, it should be pointed to about:blank or javascript:false. This seems to work fine so far:
function getNative(objectName, callback) {
$("<iframe>", {
src: "javascript:false",
style: "display:none;"
}).appendTo("body").load(function(){
callback(this.contentWindow[objectName]);
$(this).remove();
});
}
//Use like this:
getNative("JSON", function(JSON) {
console.log(JSON.stringify({key: "value"}));
});
Note that for bookmarklets jquery must be fetched from reliable sources and protected within a local scope too.

Joomla2.5 framework seems to be interfering with javascript syntax

The below code works perfectly outside of Joomla2.5. as well as in earlier versions of Joomla , but fails when it's within a Joomla2.5 article, or rendered by a Joomla2.5 plugin.
The line in question is this one.
s1.addVariable('playlistfile', 'http://www.myserver.com/playlist.php?s=123&u=789
It returns an XML playlist which the player normally loads and plays as expected, but is the cuplprit because using a hardcoded file name with an XML extention works properly. I've tried all the usual encoding routines, but with no luck. Is there an approach, or syntax, that will work from within Joomla2.5?
Full Context:
<script type='text/javascript'>
var s1 = new SWFObject('http://www.myserver.com/v5.7/player.swf', 'player', '420', '315', '9.0.124', '#FFFFFF');
s1.addParam('allowfullscreen', 'true');
s1.addParam('allowscriptaccess', 'always');
s1.addVariable('streamer', 'rtmp://streaming.myserver.com/');
s1.addVariable('playlistfile', 'http://www.myserver.com/playlist.php?s=123&u=789');
s1.write('mediaspace1');
</script>
Also, I'm aware that there are newer, and other ways of loading the JW Player, but this is an interim step of converting many, many sites, and some legacy code must be retained.
Among the "usual encoding", have you tried "encodeURIComponent()" while adding the playlistfile variable? Not sure if PHP encoding would accomplish it, but Flash will not handle it correctly otherwise.

Validate URL information in javascript

I am trying to validate the output that the below script generates. The information is being parsed through a proxy which has all the information encoded correctly (for example & being &) however when I use the W3 Validator I get the following
& did not start a character reference. (& probably should have been
escaped as &.)
…://www.youtube.com/watch?v=pgALxO5r7_0&feature=youtube_gdata_player"
class="wa…
I have tried but to no success to figure out what is going wrong between the proxy and the output. Any help would be appreciated. I think the issue is around
src: escape( $(this).find('link').text()),
Full Source:
<script type="text/javascript">
$(document).ready(function() {
projekktor('#player_a', {
useYTIframeAPI: false,
width: 730,
height: 452,
plugin_display: {
logoImage: "includes/images/transIcon.png"
},
controls: true,
playlist: [{0:{src:'includes/proxy.php?url=http://gdata.youtube.com/feeds/base/users/SkiBsandDXL/uploads?alt=rss&v=2&orderby=published', type:"text/xml"}}],
reelParser: function(xmlDocument) {
var result = {};
var regMatch = new RegExp("http:[^ ,]+\.jpg");
result['playlist'] = [];
$(xmlDocument).find("item").each(function() {
try {
result['playlist'].push({
0:{
src: escape( $(this).find('link').text()),
type: 'video/youtube'
},
config: {
poster: regMatch.exec(unescape( $(this).find('description').text())),
title: $(this).find('title').text(),
desc: $(this).find('description').text()
}
});
} catch(e){}
});
return result;
}
});
});
</script>
I'm going to take a few wild guesses here:
Guess one is that you are using an XHTML doctype. Unless you know how exactly how XHTML differs from HTML then use HTML. HTML 4.01 strict or HTML5.
Again, working on my guess that your working with XHTML, the contents of your script element need to be CDATA. This is reason enough to not use XHTML.
If you must use XHTML, then either put in the CDATA wrapper, or make your script external. Having the scripts external is always a good idea anyways.

Load Recaptcha script with Prototype

I need to load the Recaptcha library on demand, with javascript (using Prototype):
var captcha = new Element('script', { type: 'text/javascript', src: 'http://api.recaptcha.net/js/recaptcha_ajax.js' });
$$('head')[0].appendChild(captcha);
captcha.onload = function()
{
Recaptcha.create("dsfahsldkjfhlasdjfc","recaptcha_image", {theme: "custom"});
};
The problem here is with IE, of course. It seems that the captcha.onload wont work in IE. As usual, it works on other browsers.
So, how can I check that the script is loaded on IE, and call Recaptcha.create afterwards?
Is there an easier and cross-browser way of loading and evaluating external scripts with Prototype?
Thanks.
Looks like IE doesn't support onload, but DOES support onreadystatechange:
Sample code for onreadystatechange:
http://gist.github.com/461797
Post with some info, source of above link:
http://blog.andrewcantino.com/post/211671748/replacement-for-script-onload-in-ie

Categories

Resources