AS3 Flash - render html via ExternalInterface

Question

This is my first question on Stack Overflow. It's not the first time I wanted to write one, but usually I find a solution using the search bar, this time I didn't. The problem I'm tackling is a little bit complex so I'll try and be as thorough as possibile.

Basically we're adding Chinese payments to an already existing ecommerce in Flash. The whole website is in AS3, embedded using SWFObject, already using ExternalInterface for other things.

This new Chinese payment method is a bit old-fashioned, so they have a strange way of handling payments. Once we've sent a POST to their servers with all the order details, they respond with an HTML page. My problem is rendering this page, considering that I receive it inside Flash.

The solution I'm trying at the moment works partially, meaning that I'm able to see the page, but the Chinese characters that are supposed to be in the page are rendering out badly. Instead of the Chinese characters I'm seeing weird characters, so I'm guessing there must be an encoding problem when I pass the HTML from Flash to Javascript. This is how I'm doing it:

AS3:

//extract html page from response
var newHTML:String = e.currentTarget.data;
//trim whitespace to avoid javascript error
newHTML = newHTML.replace(/\n/g, '');
newHTML = newHTML.split("\r").join("");

if(ExternalInterface.available)
  ExternalInterface.call("chinesePayment('"+newHTML+"')");
else
  trace("External interface error");

Javascript:

function chinesePayment(param) {
  var newWindow = window.open();
  //var unescaped = unescape(param);
  newWindow.document.write(param);
}

I've tried messing about with unescape, escape, URIencoding but without any success, so I'm really hoping you can help me out here!

Thanks, Domenico

EDIT:

I'd just like to mention that I'm receiving a correct HTML page from their servers. I've tried saving the page locally, copying the HTML code directly from the server response, and the page views correctly. That means that there has to be something wrong in the process of passing the page from AS3 to Javascript.

EDIT2 !important:

I've realised that the problem lays in the popup encoding. When I copy the HTML from the popup, paste it in an editor and save it I can correctly view the HTML. Seems like the popup doesn't consider gbk encoding. I'm now looking for a solution to this problem.

Vagrancy

If you dump that data via say FileReference, then open it as HTML, does it work properly in the browser? – Columella

I haven't tried that, also because this can't be a final solution. Seeing as this website receives a lot of orders I'd like to avoid creating static pages for each order. Anyhow I tried inserting a breakpoint in flash, copying the html and pasting it into and editor. Once I saved that file it was rendering properly, thus the html is fine up until there. I will try this solution just to see if it works, then let you know how it goes. – Vagrancy

No, I mean about testing whether you receive a correct HTML page, and whether it has all metadata set properly, and other stuff. If it'll get correctly formed in browser if transferred via file, then you receive a correct HTML and you need to dig into JS handling HTML strings further - I don't have knowledge about whether something can malfunction in process. If not, then you either receive an incorrect/incomplete HTML, or you lack fonts on your system, or there is some other non-programming cause of the behavior you observe. – Columella

In that case I can confirm that I receive a correct HTML page. When copying the code received directly from the server response, and saving that code into a HTML file on my computer, I viewed the page correctly. I'll edit the main post adding this information. Thanks! – Vagrancy

According to this site, the following code should do a correct UTF-8 encode of the characters using a combination of encodeURIComponent and unescape, although I'm unfamiliar with Chinese symbols and how they are encoded: newWindow.document.write(unescape(encodeURIComponent(param))); – Katharyn

I'd actually already found that site and given it a shot, it changes the characters but still doesn't visualize them properly. The problem seems to be that the new popup doesn't default to gbk encoding, like it does when I open the html from a local file. I also noticed that there is already a <meta http-equiv="Content-Type" content="text/html; charset=gb2313"> tag in the html so I really don't know how to force that type of encoding on the popup.. – Vagrancy

Admittedly a wild shot, but maybe you can try to actually open a blank html page that is served up by your server before writing to the document body. The server should be sending along the desired text encoding in the header of the request, preparing the browser of what encoding to expect... – Katharyn

Haha! I had tried that too! Unfortunately didn't change much, fortunately I've found a solution! – Vagrancy

Answer 1

I've finally found a solution!!!!

Basically I had to render the chinese characters in flash so that when I passed them to javascript they were already encoded. So first of all I had to change the type of URLLoaderDataFormat to BINARY so that I received a byteArray:

my_loader.dataFormat = URLLoaderDataFormat.BINARY;

Once I received the response I modified the code this way:

        var bytes:ByteArray = e.currentTarget.data;
        var newHTML:String = bytes.readMultiByte(bytes.length,"gb2312");
        //trim whitespace to avoid javascript error
        newHTML = newHTML.replace(/\n/g, '');
        newHTML = newHTML.split("\r").join("");

        if(ExternalInterface.available)
            ExternalInterface.call("chinesePayment('"+newHTML+"')");
        else
            trace("External interface error");

As you can see, thanks to a specific byteArray function I can read the response using the preferred charset, and now it works!

The javascript remained the same, without unescape or similars. In this way the javascript function received a string with the chinese characters in it, not with the equivalent utf chars.

Thanks to everyone, you helped me get to the solution!

Vagrancy