Javascript error on calling flex-AS function
I am trying to call call action script function from JS but i get the following error
Error: getFlashMovie(swfobjectID).sayWhat is not a function
Can any body let me know what am i doing wrong here
<html>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="myMovieName" WIDTH="225" HEIGHT="200">
<PARAM NAME="movie" VALUE="ax.swf" /> <PARAM NAME="quality" VALUE="high" /> <PARAM NAME="bgcolor" VALUE="#FFFFFF" /> <EMBED href="ax.swf" src="ax.swf" quality=high bgcolor=#FFFFFF NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"> </EMBED> </OBJECT>
<script>
function getFlashMovie(movieName) {
alert("In get Flash Movie");
开发者_高级运维 document.getElementById(movieName).setAttribute("name", movieName);
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function sayWhat()
{
alert("In call as");
var swfobjectID = 'myMovieName';
alert(swfobjectID);
//call flex function
getFlashMovie(swfobjectID).sayWhat();
}
</script>
<input type="button" onclick="javascript:sayWhat();" value="Click Me" />
</html>
MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initCamera()">
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.controls.Alert;
import flash.display.InteractiveObject;
import flash.display.Sprite;
import flash.media.*;
import flash.net.*;
import flash.external.*;
import flash.external.ExternalInterface;
public function sayWhat():void {
Alert.show("Hi");
}
public function initCamera():void {
//stop();
ExternalInterface.addCallback("sayWhat", sayWhat);
}
]]>
</mx:Script>
</mx:Application>
Here is a working sample application that calls your flex sayWhat funciton from javascript.
It contains 4 files: ax.mxml, call_flfunc.html, ax.js and ax.css.
You should put the last three files and the generated ax.swf file in the same folder on your web server (or modify their path where they are referenced), and it will work.
ax.mxml: your main flex application's structure
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="300" height="300" backgroundColor="#bee3f6"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function sayWhat():void {
Alert.show("Hi");
}
public function onCreationComplete():void {
Security.allowDomain("localhost");
// binds this.sayWhat to the external interface, so when from
// javascript is called the compiled swf object's sayWhat function,
// it will be transferred to this.sayWhat.
ExternalInterface.addCallback("sayWhat", sayWhat);
// The next line tells the external interface (the parent application:
// browser window), that this application has finished loading, its
// ready to be used.
// In js there has to be a global method with this name.
ExternalInterface.call("onFlashAppInited");
}
]]>
</mx:Script>
</mx:Application>
call_flfunc.html: the html content into which the ax.swf is embedded
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AX</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="ax.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app">
<div id="app-header">
<input type="button" value="Call Flex function"
onclick="onButtonClick()" />
</div>
</div>
<!-- tmp is a not displayed div element used just to hold the swf
until it gets rendered inside the app div -->
<div id="tmp">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ax"
width="300" height="300"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="ax.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#bee3f6" />
<param name="allowScriptAccess" value="always" />
<embed src="ax.swf" quality="high" bgcolor="#bee3f6" width="300"
height="300" name="ax" align="middle" play="true" loop="false"
quality="high" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer"> </embed>
</object>
</div>
<script type="text/javascript" src="ax.js"></script>
</body>
</html>
ax.js: contains all the necessary javascript classes and functions
function Util(){
this.ua = navigator.userAgent.toLowerCase();
this.isOpera = this.ua.indexOf("opera") > -1;
this.isSafari = (/webkit|khtml/).test(this.ua);
this.isIE = !this.isOpera && this.ua.indexOf("msie") > -1;
this.isIE7 = !this.isOpera && this.ua.indexOf("msie 7") > -1;
this.isGecko = !this.isSafari && this.ua.indexOf("gecko") > -1;
this.ieVersion = parseInt(this.ua.substring(this.ua.indexOf("msie") + 4));
if (this.ieVersion == 0) {
this.ieVersion = 100;
}
}
Util.prototype = {};
var util = new Util();
/**
*
* @param id
* @param swf
* @param width
* @param height
* @param scriptAccess
* @param allowFullscreen
* @return
*/
function FO(id, swf, width, height, scriptAccess, allowFullscreen){
this.id = id;
this.movie = swf;
this.height = height ? height : 180;
this.width = width ? width : 240;
this.scriptAccess = scriptAccess ? scriptAccess : "always";
this.allowFullscr = allowFullscreen ? "true" : "false";
this.obj = document.createElement("embed");
this.obj.src = this.movie;
this.obj.width = this.width;
this.obj.height = this.height;
this.obj.name = this.id;
this.obj.id = this.id;
this.obj.align = "middle";
this.obj.type = "application/x-shockwave-flash";
this.obj.setAttribute("quality", "high");
this.obj.setAttribute("bgColor", "#bee3f6");
this.obj.setAttribute("play", "true");
this.obj.setAttribute("loop", "false");
this.obj.setAttribute("allowScriptAccess", this.scriptAccess);
this.obj.setAttribute("allowFullscreen", this.allowFullscr);
this.obj.setAttribute("pluginspage", "http://www.adobe.com/go/getflashplayer");
}
FO.prototype = {
id :null,
width :null,
height :null,
movie :null,
scriptAccess :null,
allowFullscr :null,
obj :null,
addParam : function(name, value){
var p = document.createElement("param");
p.name = name;
p.value = value;
this.obj.appendChild(p);
}
};
var app = document.getElementById("app");
var appInited = false;
function onButtonClick(){
if (appInited)
flashApp.sayWhat();
else
alert("Flash app not inited!");
}
function init(){
if (util.isIE)
flashApp = document.getElementById("ax");
else
flashApp = new FO("ax", "ax.swf", 300, 300).obj;
app.appendChild(flashApp);
}
function onFlashAppInited() {
// alert("Flash app inited!");
appInited = true;
// remove the temporary swf container: tmp
document.body.removeChild(document.getElementById("tmp"));
}
window.onload = init;
ax.css: the style sheet applied to the call_flfunc.html page
html, body {
width: 100% !important;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
text-align: center;
}
body {
overflow: auto;
text-align: center;
}
object, embed {
margin: 0px !important;
padding: 0px !important;
}
#app {
margin-left: auto;
margin-right: auto;
margin-top: 2%;
width: 1000px;
height: 545px;
text-align: center;
}
#app-header {
margin-left: auto;
margin-right: auto;
width: 1000px !important;
text-align: center;
height: 23px;
line-height: 23px;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
#tmp {
display: none;
visible: false;
}
I hope it's understandable, and you can work from it.
You might need an other kind of workaround in js to call the flash function from any browser.
Here i share my way to accomplish this (hope it is not deprecated yet...). You need a javascript class (i named it FO):
/**
*
* @param id
* @param swf
* @param width
* @param height
* @param scriptAccess
* @param allowFullscreen
* @return
*/
function FO(id, swf, width, height, scriptAccess, allowFullscreen){
this.id = id;
this.movie = swf;
this.height = height ? height : 180;
this.width = width ? width : 240;
this.scriptAccess = scriptAccess ? scriptAccess : "always";
this.allowFullscr = allowFullscreen ? "true" : "false";
this.obj = document.createElement("embed");
this.obj.src = this.movie;
this.obj.width = this.width;
this.obj.height = this.height;
this.obj.name = this.id;
this.obj.id = this.id;
this.obj.align = "middle";
this.obj.type = "application/x-shockwave-flash";
this.obj.setAttribute("quality", "high");
this.obj.setAttribute("bgColor", "#bee3f6");
this.obj.setAttribute("play", "true");
this.obj.setAttribute("loop", "false");
this.obj.setAttribute("allowScriptAccess", this.scriptAccess);
this.obj.setAttribute("allowFullscreen", this.allowFullscr);
this.obj.setAttribute("pluginspage", "http://www.adobe.com/go/getflashplayer");
}
FO.prototype = {
id :null,
width :null,
height :null,
movie :null,
scriptAccess :null,
allowFullscr :null,
obj :null,
addParam : function(name, value){
var p = document.createElement("param");
p.name = name;
p.value = value;
this.obj.appendChild(p);
}
};
You will need an initialization method (or extend the existing one):
// should be called on window.onload
function init() {
var flashObject = null;
if (isIE)
flashObject = document.getElementById("myMovieName");
else
{
flashObject = new FO("myMovieName", "ax.swf", 225, 200).obj;
// **app** is the id of a div / html container element,
// in which your <object> is positioned.
document.getElementById("app").appendChild(flashObject);
}
}
window.onload = init;
and for calling the desired method:
//somewhere else in your code:
if (flashObject)
flashObject.sayWhat();
When calling from javascript try:
myMovieName.sayWhat();
加载中,请稍侯......
精彩评论