Using swf after the page load
Shadow Elder
switched over to the new 2.0 beta.
I noticed that you can't embed a flash object after the pages loads as
the embedding with the new version happens only on the onload. Is
there a way to use this JS to replace an existing flash?
webado
Shadow Elder
the solution that i came up with was to have custom versions of two
functions
embedSWF
added parameter to bypass the onload event and immediately embed the
object
createSWF
modified the function to add the flash as a child instead of
replacing the target outright.
not sure if there's a better way to do it given the way swfobject 2.0
works.
On Oct 4, 5:49 pm, webado <web...@gmail.com> wrote:
> Might this other thread help?
>
> http://groups.google.com/group/swfobject/browse_thread/thread/dc35a35...
illias...@gmail.com
Shadow Elder
handle replacing of existing flash (execute immediately instead of
waiting for a document.load which already has happened)
kb_embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr,
heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj,
replaceMode) {
//at end of function add in replace logic
if (replaceMode!=true){
addDomLoadEvent(function() {
kb_createSWF(att, par,
document.getElementById(replaceElemIdStr));
createCSS("#" + replaceElemIdStr, "visibility:visible");
});
} else {
kb_createSWF(att, par,
document.getElementById(replaceElemIdStr));
createCSS("#" + replaceElemIdStr, "visibility:visible");
}
-------------------------------------------------------------
for the createSWF object - modify the 3 replace nodes with an
inserting of the object
function kb_createSWF(attObj, parObj, el) {
// (innerHTML -> outerHTML)
if (typeof el.innerHTML != "undefined") {
el.innerHTML = '<object classid="clsid:D27CDB6E-
AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';
}
//old way replacing node with flash embed
// el.parentNode.replaceChild(e, el);
//new way clone node and add in flash as child node to clone, then
replace this keeps all existing attributes while emptying contents
var newel = el.cloneNode(false);
newel.appendChild(e);
el.parentNode.replaceChild(newel, el);
//old way replacing node with flash object
// el.parentNode.replaceChild(o, el);
//new way clone node and add in flash as child node to clone, then
replace this keeps all existing attributes while emptying contents
var newel = el.cloneNode(false);
newel.appendChild(o);
el.parentNode.replaceChild(newel, el);
------------------------------------------------------------------------------------------------
In order to use this fuction to replace an existing flash, it must be
inserted with the customized functions, otherwise the container is
removed from the document.
NOTE: these modifications have not been extensively tested, only with
IE6/FF1.5--xp , ie7/opera9/ff2--vista
and I'm not sure how they interact with the rest of the library.
On Oct 5, 9:21 am, "illias.di...@gmail.com" <illias.di...@gmail.com>
wrote:
Jon Marston
initial page load. I was having lots of trouble using swfobject to
render a swf in this circumstance. the first modification (adding the
parameter to decide whether or not to wait for a dom event or to just
go for it) fixed my problem.
I would request that this parameter or something similar be merged
into the code for swfobject.
Jon Marston
marstonstudio.com
Aran Rhee
You can just run the swfobject 1.x code after the DOM has loaded by
listening to the onLoad event of the page:
<body onload="doSWFObjectStuff()">
Does that solve your issue?
Aran
Jon Marston
XmlHttpRequest, so there isn't actually a body to add an onload event
to. It's just an html fragment. In my case, the embed was never firing
because the dom event had passed.
I only used the first part of the patch, adding the extra parameter
and the if/then statement to the public embedSwf method on whether or
not to wait for the event or to just go. The patch gives exactly the
behavior i needed.
Note that I have multiple swfs on the page, only one of which needs to
be loaded asynchronously. I was wary of trying to trigger a dom event
manually later to trigger the embedding because i thought it might
cause the other swfs the reload.
Jon
Aran Rhee
I have use xmlHttpRequest before with SWFObject 1.x. Below are some generic
reusable functions to achieve what you want (I think):
The process is kicked off by calling the makeHttpRequest () function and
passing in the location of the server (including any parameters e.g.
http://myserver.com/dosomething?var1=a&var2=b) and the callback function you
want to call when the results come back. In the below case I have a function
called setFlash which does the swfobject related stuff. The script block
lives in the <head> section.
So the full call would be:
// example of fully constructed URL with dynamic params (make as you see
fit)
var tosend = "http://myserver.com/dosomething?var1=a&var2=b";
makeHttpRequest (tosend, "setFlash");
<script type="text/javascript" language="javascript">
// writes flash content to the screen
function setFlash( loc )
{
var so = new SWFObject(loc, "swfbanner", "728", "90", "8",
"#ffffff");
so.write("flashcontent");
}
// re-usable generic AJAX caller with return function as a param
function makeHttpRequest(url, callback_function, return_xml)
{
var http_request = false;
if (window.XMLHttpRequest) // Mozilla, Safari,...
{
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) // IE
{
try
{
http_request = new
ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new
ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
//do nothing
}
}
}
if (!http_request)
{
alert('Unfortunatelly you browser doesn\'t support
this feature.');
return false;
}
http_request.onreadystatechange = function()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
if (return_xml)
{
eval(callback_function +
'(http_request.responseXML)');
}
else
{
eval(callback_function +
'(http_request.responseText)');
}
}
else
{
alert('There was a problem with the
request.(Code: ' + http_request.status + ')');
}
}
}
http_request.open('GET', url, true);
http_request.send(null);
}
</script>
Cheers,
Bobby
[1] We currently have one open issue regarding the inclusion of the
library within the body of a web page: http://code.google.com/p/swfobject/issues/detail?id=9
[2] SWFObject is designed in such way that you can easily modify it
for multiple purposes.
If you take a closer look at the uncompressed file in the SRC
directory, you can see that SWFObject's basic signature look like the
following:
var swfobject = function() {
function a() {}
function b() {}
function c() {}
function d() {}
return { // Public API
a: a,
b: b
}
}();
Hereby all functions are encapsulated within swfobject's main function
scope, however functions a and b are exposed to the outside world via
the public API. They can be accessed via swfobject.a() and
swfobject.b()
The following functions are designed in such way, that they can easily
be made public, without messing up the library's main flow/
functionality:
- function addDomLoadEvent(fn) (Note: cross-browser way to add/
simulate a DOMContentLoaded event)
- function addLoadEvent(fn) (Note: cross-browser way to add an onload
event)
- function createSWF(attObj, parObj, el) (Note: cross-browser way to
create a SWF dynamically)
- function hasPlayerVersion(rv) (NOTE: is already public, see
SWFObject's documentation)
- function createCSS(sel, decl) (NOTE: cross-browser way to create
dynamic CSS)
So, if you want to reuse SWFObject's functionality and like publish a
SWF once a page is loaded and dependent of the result from some other
JavaScript code, you can do the following:
1. Make the createSWF function public by adding it to the public API
2. If you want you can compress the modified file by using the
following technote: http://code.google.com/p/swfobject/wiki/SWFObject_2_0_howto_compress
3. Use something like the following inside your js code:
if (swfobject.hasFlashPlayerVersion("9.0.18")) {
swfobject.createSWF({ data:"myContent.swf", width:"780",
height:"400" }, { flashvars:"foo=bar" },
document.getElementById("someHtmlElement"));
}
else {
// do something else
}
Please note that we kept the public API simple, because most people
will not use elaborate scripting functionality. We are confident that
programmers will find their way around once a few technotes regarding
this functionality will be released (scheduled to be made available
after the definitive version is there, so you can regard this as a
sneak preview :-)
Hope this helps.
sean.s...@gmail.com
On Oct 11, 2:49 am, Bobby <bobbyvandersl...@gmail.com> wrote:
> Two remarks:
>
> [1] We currently have one open issue regarding the inclusion of the
> library within the body of a web page:http://code.google.com/p/swfobject/issues/detail?id=9
>
> [2] SWFObject is designed in such way that you can easily modify it
> for multiple purposes.
SNIP>>>>>
Following this example breaks IE big time... will post later as I
learn more about the error.
This functionality is going to be important, what about adding this as
a standard feature?
Bobby
> learn more about the error.
Just make sure that the DOM is available before you apply the code
(e.g. use the addLoadEvent or addDomLoadEvent functions)
> This functionality is going to be important, what about adding this as
> a standard feature?
I think this would be a good idea too, however we still have to decide
on this.
Bobby
Documentation and examples can be found at:
http://code.google.com/p/swfobject/wiki/SWFObject_2_0_api_javascript_dev
troyvit
calling it from within a separate function as outlined here:
and it works in every browser except FireFox for Mac OS X. Would
making the function public get around this browser issue -- i.e. do
other versions of firefox allow for more sloppy javaScript? If so how
do I add it to the public API?
Thanks,
Troy Vitullo
Henrik Nyh
Haven't read through this thread very thoroughly, and I'm not sure I
fully understand all the issues related to this -- I'm not a flash
developer myself, but trying to help one out.
I came up with a very, very simple solution. Tested in Firefox 2 and
Safari 3 on a Mac.
See this diff against current trunk: http://pastie.textmate.org/private/4ftrnrhae7h50nko8k6sg
The fix is really just the first inserted line. This:
function addDomLoadEvent(fn) {
domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only
available in IE5.5+
}
becomes this:
function addDomLoadEvent(fn) {
if (isDomLoaded) return fn(); // if the DOM is already loaded,
trigger directly
domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only
available in IE5.5+
}
The rest of the diff is testing it out. I'm using a swf that animates
to verify that the existing flash videos aren't reloaded when a new
one is added.
Again, I may have misunderstood the problem, but if not, please do
merge this into trunk.