JavaScript from HTML loaded into Flash

An answer to the question that you may or may not have asked: Yes it is possible to invoke a JavaScript function from HTML content that has been loaded into Flash.

You can read the rest of the post, or jump straight to the example (and maybe come back to the post afterwards).

Let’s say you have a Flash movie with a dynamic text field with an instance name of content. The ActionScript below assumes you will not be creating this text field at runtime, but that it is drawn on your stage. Set the html property to true so that it will properly display our HTML.

content.html = true; // make content accept HTML code.

You decide to load HTML into content using LoadVars(), and create a new LoadVars object.

var loadContent:LoadVars = new LoadVars(); // creates the object
loadContent.load('htmlfilename.html');           // loads the HTML

Your HTML content looks like this:

contentText=<p>This is some HTML content. And <a href="javascript:doSomething()">this</a> is a link.</p>

I should probably explain this, eh? LoadVars does what its name suggests: it loads variables. You pass the variables just as you would if you were constructing a query string for a URL.

varName1=The first variable value&varName2=The second variable value

Typically, if you were constructing a query string, you would use + instead of spaces. If you were using PHP, you would probably encode the string using urlencode(). But when using HTML, encoding the string will leave you with raw code in your text box, </> and all.

In the above example, contentText is the variable, and <p>This is some HTML content. And <a href="javascript:doSomething()">this</a> is a link.</p> is its value. Note the javascript:doSomething() function.

So back to the ActionScript … Now we’ve got to assign the value of contentText to the content box:

/*
Once the HTML document (htmlfilename.html)
finishes loading, it will execute the function below.
*/
loadContent.onLoad = function(){
      content.htmlText = this.contentText;
}

Now in the HTML file that contains your Flash movie, define a function known as doSomething().

function doSomething(){
   document.getElementById('headline').style.color = '#33ccff';
}

Now, when you click on the link in the HTML loaded into your Flash document, it will activate doSomething().

An editor’s note: If you have a question about this technique and its possible applications, DON’T ASK ME. I (probably) can’t help you. I’m not an expert on using HTML and JavaScript with Flash. I just stumbled across this on the way to something that will be greater if I can ever figure it out.