Skip to main content
F
Fithlee
Participant
June 14, 2011
Question

HTML window in AIR app can't open new window

  • June 14, 2011
  • 3 replies
  • 2274 views

Hi, By allowing HTML content to be displayed inside our AIR app it's possible for our partner organization to write their own custom features hosted on HTML pages at their site, but for their content to appear integrated seamlessly within our AIR app's container so that it looks like it belongs there...

We've successfully got an HTML window within our AIR app that navigates to content in a sub-folder on a web-hosted domain. Content displays correctly and hyperlinks function within the HTML window as we'd expect apart from three scenarios that appear to be manifestations of the same problem:

  1. A hyperlink on a page shown in-app with a link to a PDF stored on the web server has no action
  2. A hyperlink on a page shown in-app with a link to a video file stored on the web server has no action
  3. A hyperlink on a page shown in-app with a link to another site (target="_blank" parameter) has no action

All three hyperlink scenarios work as we'd wish if we navigate to the page in a standard browser.

How can we code the HTML so that we can display selected content in an HTML window inside the AIR app; but have selected hyperlinks invoke the user's standard web browser, or launch Adobe Reader, or play a video file etc?

Note, we understand how to do those things within AIR itself, but can't figure out how to achieve this from inside the HTML window in the app.

This topic is closed to new replies. Start a new post to keep the conversation going.

3 replies

B
blazejewicz
Participating Frequently
June 15, 2011

Hello,

As to "_blank" links:

this is long-standing lacking feature - as there is no introspection of event of such type - so it goes and could not be prevented. One could either handle all navigation with system browser (all links open in system external browser) or handle them in embedded browser - similar issue is bugging people using phoneGab with jQueryMobile - application eats all external links or none at all). There are solution for that including runtime introspection of DOM object to retrieve all anchor (a) tags in rendered document and attach custom click handler via host object like on complete:

var document:Object = html.htmlLoader.window.document;

if(!document && !document.hasOwnProperty("getElementsByTagName")) return;

var linksArray:Object = document.getElementsByTagName("a");

if(!linksArray) return;

var a:Object = null;

for(var i:Number = 0; i < linksArray.length; i++)

{

     a = linksArray;

     if(a)

     {

          a.onclick = function(event:Object):Boolean

          {

               if(event.target.hasOwnProperty("href") && event.target.hasOwnProperty("target"))

               {

                    if(event.target.target != "_blank") return true;

                    flash.net.navigateToURL(new URLRequest(event.target.href));

               };

               return false;

          };

     };

};

but if you have control on what content is provided you could take care of handling links depending on runtime feature detection that way in javascript:

<script type="text/javascript">

     function handleClick(a)

     {

          if(!window.runtime) return true;

          if(a.hasAttribute("target") && a.getAttribute("target") == "_blank")

          {

               var href = a.getAttribute("href");

               var req = new window.runtime.flash.net.URLRequest(href);

               if(req) window.runtime.flash.net.navigateToURL(req);

          };

          return false;

     }

</script>

<a     href="http://www.bbc.co.uk/" target="_blank" onclick="handleClick(this);">BBC</a>

<br />

<a href="http://www.google.com/" onclick="handleClick(this);">Google</a>

(above could be scripted globally with help of jQuery for example for all links without much coding).

In 2.7 there is new event introduced to help with introspection so one could prevent event if link is internal and do whatever is expected in application:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filesystem/File.html

If you post some details on how PDF and video content is expected to be shown in html I'm sure someone would share some hints as well,

regards,

Peter Blazejewicz

F
FithleeAuthor
Participant
June 15, 2011

Peter, thanks so much for your input: really, really helpful. After posting my question last night I spent a while trying to find the right search terms in Google to throw up resources that could help and I came across the following selection which I'm reproducing here for those who might come afterwards looking for a solution. Having said that, we've not yet coded a solution that we're comfortable with: we're trying to accomplish three things

  1. We want some hyperlinks within HTML pages to navigate to similar pages viewed within the AIR app's HTML window (all visually branded so they look like they're a part of the AIR app even though they're served from web content, not locally, and written/updated by our customer's team not us);
  2. We want other hyperlinks to open the user's default browser outside and independent of the AIR app to, for example, display a web-hosted PDF or external URL. At present the PDF refuses to display within the AIR app HTML window: we just get a black area with no selectable controls or content though the same HTML page works fine hosted on the Internet when viewed in a conventional browser.
  3. We want to display, say, a YouTube video on the web-hosted HTML page viewed within the HTML window in the AIR app. At present the video plays just fine when viewed in a conventional browser, but we get a blank area that we can't interact with and no controls when we view the same content in the AIR app's HTML window.

We used the sample page (not ours) at http://www.456bereastreet.com/lab/javascript-target/1.1/ to test within our AIR app's HTML window: the first (PDF) link fails; the second and third links work, but replace the content in the AIR HTML window rather than launching an external browser. We also replicated and hosted our own version of this same page, modified to include the embed code from a YouTube video in the page <BODY> tags...Our page worked fine in a choice of browsers, but refused to display the video player when viewed in the AIR app.

Here are the links to the resources that we are wading through to look for a solution, discovered through a Google search for ['Adobe AIR' html window] - without the square brackets:

  • http://groups.google.com/group/air-tight/browse_thread/thread/85b67ef5ecbf3ff1?pli=1
  • http://cookbooks.adobe.com/post_AIR_HTML_Control__Getting_window_open___to_redirec-9243.html
  • http://dmartin.org/weblog/html-component-adobe-air-supports-popup-windows
  • http://sevenwire.com/blog/2009/08/26/adobe-air-opening-external-links-in-another-browser.html
  • http://blog.skinkers.com/2011/01/13/air-window-wont-show-external-htmlswf-in-html-component/
B
blazejewicz
Participating Frequently
June 15, 2011

Hello,

I cannot see issue with playing back Youtube javascript based player - it's just easy to test as loading:

http://code.google.com/apis/youtube/youtube_player_demo.html

into browser instance (as far as I can test with 2.6 rendered app on OS X it seems to work fine). if you load that page - are you able to see "chromeless" and "embedded" players?

(btw: are you using "transparent" type of application window?)

regards,

Peter

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices