Search code examples
htmlactionscript-3apache-flexair

Inject html/javascript-code into Flex AS3 HTML class

I need to Inject html/javascript-code into every HTML that gets loaded.

The program uses the HTML class.

I disassembled the original Flex3 files and found this.

The important? functions I modified/tested:

public function set htmlText(value:String) : void
{
    _htmlText = value;
    htmlTextChanged = true;
    _location = null;
    locationChanged = false;
    invalidateProperties();
    invalidateSize();
    invalidateDisplayList();
    dispatchEvent(new Event("htmlTextChanged"));
}

public function set location(value:String) : void
{
    _location = value;
    locationChanged = true;
    _htmlText = null;
    htmlTextChanged = false;
    invalidateProperties();
    invalidateSize();
    invalidateDisplayList();
    dispatchEvent(new Event("locationChange"));
}

I successfully changed the code of set location and managed that only http://www.example.com/ gets loaded.

However, the htmlText setter seems not to get called when the location is set using location.

This is what I have tried:

public function set htmlText(value:String) : void
{
    _htmlText = "<html><h1>test</h1></html>" + value;
    htmlTextChanged = true;
    _location = null;
    locationChanged = false;
    invalidateProperties();
    invalidateSize();
    invalidateDisplayList();
    dispatchEvent(new Event("htmlTextChanged"));
}

I need to have a look in flash.net.HTMLloader but I cannot locate the file.

I hope someone can help me and tell me where the HTML-code gets loaded from the location and where it gets rendered so I can modify it before.

Thanks in advance.

Solution

  • I don't know what do you want to inject to your html content, but I think that you can do it when the complete event on the HTMLLoader of your HTML component is fired, using the window object which is :

    The global JavaScript object for the content loaded into the HTML control..

    So you can use it ( the window object ) as in any JavaSript code.

    // for the example, I took the page of your current question
var url:String = 'http://stackoverflow.com/questions/32348824/inject-html-javascript-code-into-flex-as3-html-class';    

html_content.location = url;
html_content.htmlLoader.addEventListener(Event.COMPLETE, on_complete);

    And 

    protected function on_complete(e:Event): void
{       
    var html_loader:HTMLLoader = html_content.htmlLoader;
    var document = html_loader.window.document;
    var _head =  document.getElementsByTagName('head')[0];

    // create a new css class
    var _class = '.akmozo { background: #ff9900; color: white; padding: 2px; }';                        
    var _style = document.createElement('style');
        _style.appendChild(document.createTextNode(_class));        

    // create a new js function
    var _js = 'function click_me(){ alert("Hello, how are you ?"); }';
    var _script = document.createElement('script');
        _script.appendChild(document.createTextNode(_js));  

    _head.appendChild(_style);
    _head.appendChild(_script);

    // change the page's top bar background color to green
    if(document.querySelector('.topbar-wrapper'))
    {
        document.querySelector('.topbar-wrapper').style.backgroundColor = 'green';
    }                   

    // edit the title of your question, 
    // apply the new css class and call the js function
    if(document.querySelector('.question-hyperlink'))
    {               
        document.querySelector('.question-hyperlink').innerHTML += ' [ edited by <span class="akmozo" onclick="click_me()">AKMOZO</span> ]';
    }

    // change the SO logo to my avatar                  
    if(document.getElementById('hlogo'))
    {
        document.getElementById('hlogo').style.backgroundImage = 'url(https://i.sstatic.net/YAKpv.png?s=50)';
        document.getElementById('hlogo').style.backgroundRepeat = 'no-repeat';
    }

    // do some changes in your comment
    if(document.querySelector('#comment-52605069'))
    {
        document.querySelector('#comment-52605069 .comment-copy').style.color = 'green';
        document.querySelector('#comment-52605069 .comment-copy').style.fontWeight = 700;
        document.querySelector('#comment-52605069 .comment-copy').style.fontSize = '24px';
        document.querySelector('#comment-52605069 .comment-user').innerHTML = '<span class="akmozo">akmozo</span>';
    }           
}

    This code will give you something like this :

    Of course I tried just to give you an example of what you can do, you have to improve and adapt this code to your needs.

    Hope that can help.