• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

stagewebview appending img src to divs

Explorer ,
Feb 29, 2012 Feb 29, 2012

Copy link to clipboard

Copied

I have been trying to figure this out for hours and just can't get it.

I have an ios app that I built with air 3.0. In this app I launch a stagewebview. I have different event and event listeners that make javascript (jquery) calls to load new images.

The Problem:

First off this work fine in preview. I only get the problem when I have it installed on the ipad. I am appending img srcs to divs but nothing happens. The image is never downloaded and never appears on the page.

Here is a really simple example:

<head>

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

function loadPage(projectJSONString)

{

    $('#container').append('<img src="http://www.someurl/someimage.jpg" />');

}

</script>

</head>

<body onload="loadPage()">

<div id="container">

</div>

</body>

</html>

the body tag has an onload event that calls a javascript function which simply trys to append an image to the div with an id "container".

Works fine in preview (given that you put an actual img src url) but doesn't work once it is on the ios device.

Please please help.

TOPICS
Development

Views

3.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Sep 17, 2012 Sep 17, 2012

Hello,

I met same issue. Seems there is a bug in Adobe StageWebView component. And this issue can be reproduced only in iOS. On Android and desktop it is ok.

I solved this issue by using native extension:

http://darkredz.com/ios-uiwebview-and-videoplayer-native-extension-for-air-mobile/

It is paid, but you can find open source versions, like that one:

http://matthewhx.blogspot.com/2012/04/uiwebview-native-extension-ios-example.html

or write your own.

Votes

Translate

Translate
Explorer ,
Feb 29, 2012 Feb 29, 2012

Copy link to clipboard

Copied

Oh and a quick side note: I can use the append command and insert text. It is only the img src that seems to be causing problems.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 01, 2012 Mar 01, 2012

Copy link to clipboard

Copied

Does appending anothr HTML element like a <span> work?

I wonder if preloading the image will work?  I know it is a workaround, but sometimes you have to do those things

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 01, 2012 Mar 01, 2012

Copy link to clipboard

Copied

Yeah I have tried spans with the same result. Preloading does solve the problem but is not really an option because the images being loaded are dynamic. Good thought though.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 01, 2012 Mar 01, 2012

Copy link to clipboard

Copied

Try to isolate a jquery issue (you should be using jquerymobile if possible). Try using pure JS:

var img = new Image();

img.src = 'http://www.somewhere.com/a.png';

document.getElementById('container').appendChild(img);

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 01, 2012 Mar 01, 2012

Copy link to clipboard

Copied

Ok I am able to get images loading from an onload event. But if I try to call a javascript function from actionscript images wont load (jquery or javascript). It appears that you can't add images to the DOM once the page pauses loading anything.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 17, 2012 Sep 17, 2012

Copy link to clipboard

Copied

Hello,

I met same issue. Seems there is a bug in Adobe StageWebView component. And this issue can be reproduced only in iOS. On Android and desktop it is ok.

I solved this issue by using native extension:

http://darkredz.com/ios-uiwebview-and-videoplayer-native-extension-for-air-mobile/

It is paid, but you can find open source versions, like that one:

http://matthewhx.blogspot.com/2012/04/uiwebview-native-extension-ios-example.html

or write your own.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 28, 2012 Sep 28, 2012

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 27, 2014 Feb 27, 2014

Copy link to clipboard

Copied

We are still experiencing this problem. We tried it with multiple Air versions, but it never made a difference. The problems still arose in Adobe 3.1 to Adobe Air 4.0.

After extensive tests and different approaches, we discovered that it doesn't really matter how/where the images were defined. Defining the image via the src attribute or in a CSS class, the outcome was the same: SOME images didn't load. Sometimes no images at all.

Here for example, no images were loaded at all. The area marked in green is an image tag.

The red boxes are background images that are defined in the CSS (ignore the black boxes for now). The CSS is interpreted correctly. All the dimensions are correctly rendered,
but none of the background images are loaded.

IMG_20140225_142709.jpg

All the DOM elements are appended to the DOM, once the page is loaded and the asynchronous requests are finished.
I removed all the asynchronous requests, just to make sure that this wasn't causing the conflict. But as you can imagine, that wasn't causing the issues.

I inserted callback functions to the load events of image tags we were appending. We never received an answer for that request.
So I delayed another request (200ms) and voilà: We got a response and were able to load the image correctly.

Unfortunately, we can't do that for images that are defined in the CSS. The browser itself will make the request, once the image is needed.

I somehow have the feeling that simultaneous requests (within milliseconds) are causing the problems. As you can see there are black squares within the red boxes.
These squares are also images and together form custom checkboxes. As I stated earlier, the CSS is rendered/interpreted correctly, so the bounding boxes of the elements are correct.
Only the background images are missing. So when I click on the "transparent" checkbox, a click event is fired that toggles the checked state of that checkbox. This will fire a request for an image,
because in the checked class an image is defined. And as you can see, these are loaded just fine.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 27, 2014 Feb 27, 2014

Copy link to clipboard

Copied

LATEST

You say this is still an issue in AIR 4.0? I wonder if AIR is restricting the browsers events (which run on a separate thread). Perhaps that thread is somehow unavailable.

As mentioned, you delayed your load, and I do wonder if it's simply an issue of you running a script before you assure the DOM is even ready (that breaks scripts every time). Setting the <body onload> should overcome this but try just the pure JavaScript method, no need for jQuery for this at all:

e.g. HTML5 bare doc:

<!DOCTYPE html>

<html lang="en">

          <head>

                    <meta charset="utf-8">

                    <title>debug</title>

                    <script>

                     window.addEventListener('load',function(e){

                               for (var i=0; i<20; i++)

                              {

                                   // new image

                                   var img = new Image();

                                   // listener to verify when you should see the image

                                   img.addEventListener('load',function(e){

                                             var ele = document.createElement('p');

                                             ele.appendChild(document.createTextNode('Image ' + i + ' has been loaded!'));

                                             document.body.appendChild(ele);

                                   });

                                    // load Adobe logo for example and add to DOM

                                   img.src = 'http://wwwimages.adobe.com/include/style/default/SiteHeader/logo.png';

                                   document.body.appendChild(img);

                               }

                     });

                    </script>

          </head>

          <body>

          </body>

</html>

On iPad4 OS7:

ipad4.png

Closures get me every time.. (i = 20 every time by the time the event fires).. Disregard that . All 20 logos loaded just fine, and fast.

That said, I bought darkredz ANE anyhow, I like the VideoPlayer as much as easy AS3<->JS.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines