Flex, IFrame and SWFObject

I know that there are quite a few associate problems with IFrames and Flex. Unfortunately it was a must for one application I was working on. My problem arose when I re-wrapped my swf up using SWFObject. As you can see from my post I had some good help but it overrode the logic laid out by flex-iframe by hardcoding in the CSS for the iframe in the html. But as Aran quite rightly pointed out, it was down to the method in the iframe to position it correctly. After some trial and error I found the blighter that was causing the issue with IFrames in Flex whilst using SWFObject in particular.

In the main html the main culprit is this, ensure the below DOCTYPE:

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

In the IFrame.as change the FUNCTION_MOVEIFRAME string to the below to ensure correct positioning if your altering the position of the main html content or nested object i.e. html, body { height:100%; text-align: center;}:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// Thanks to http://code.google.com/p/flex-iframe/issues/detail?id=20
        private static var FUNCTION_MOVEIFRAME:String = 
            "document.insertScript = function ()" +
          "{ " +
              "if (document.moveIFrame==null)" +
              "{" +
                  "moveIFrame = function(frameID, iframeID, x,y,w,h) " + 
                  "{" +
                      "var frameRef=document.getElementById(frameID);" +
                      "var flashMovie=document.getElementById
                             ('"+Application.application.id + "');" +
                      "frameRef.style.left=x + flashMovie.offsetLeft;" + 
                      "frameRef.style.top=y + flashMovie.offsetTop;" +
                      "var iFrameRef=document.getElementById(iframeID);" +
                      "iFrameRef.width=w;" +
                      "iFrameRef.height=h;" +
                  "}" +
                "}" +
            "}";

I am yet to test on all browsers!

example + source

Comments