HTML dans flex (deux IFrame)

**MrVentouse** · 24/02/2010, 12h00

Bonjour Bonjour,

Donc voilà, j'arrive à intégrer une page HTML souhaitée dans mon application Flex, mais celà se complique lorsque je veux en ajouter deux...

En effet, pour celà, j'ai créé deux iframe similaire, qui appelle une page chacune mais le problème est que seule la deuxième s'affiche...
Je pense qu'il s'affiche d'un problème d'écrasement...mais je ne suis sur de rien..

ci joint mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" >
    <mx:HBox width="100%" height="100%">
 
        <mx:Panel width="50%" height="100%" title="Content" paddingTop="1" paddingBottom="1" paddingLeft="1" paddingRight="1" >
            <IFrame id="iFrame" source="http://www.google.fr" width="100%" height="100%" visible ="true" />
 
        </mx:Panel>
 
    <mx:Panel width="50%" height="100%" title="Content" paddingTop="1" paddingBottom="1" paddingLeft="1" paddingRight="1" >
           <IFrame id="iFrame2" source="http://www.adobe.com" width="100%" height="100%"  visible="true"/>
        </mx:Panel>
 
    </mx:HBox>
 
</mx:Application>

ps: Je mettrais à disposition le fichier IFrame.mxml si besoin est!!

**Jim_Nastiq** · 24/02/2010, 13h14

Salut,

coté conteneur HTMl, tu as créé 2 div pour acceuillir ces iframes? peut on voir ton code HTMl et ton code Iframe stp ?

**MrVentouse** · 24/02/2010, 13h21

Merci d'avoir répondu si vite..

Oui j'ai créé 2 div pour accueillir ces iframes (aprés c'est peut être mal fait..)

voilà les codes

Html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!-- saved from url=(0014)about:internet -->
<html lang="en">
 
<!-- 
Smart developers always View Source. 
 
This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 
 
Learn more about Flex at http://flex.org 
// -->
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<!--  BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--  END Browser History required section -->
 
<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
 
<!--  BEGIN Browser History required section -->
<script src="history/history.js" language="javascript"></script>
<!--  END Browser History required section -->
 
<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = ${version_major};
// Minor version of Flash required
var requiredMinorVersion = ${version_minor};
// Minor version of Flash required
var requiredRevision = ${version_revision};
// -----------------------------------------------------------------------------
// -->
</script>
</head>
 
<body scroll="no">
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install 
 
(6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);
 
// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, 
 
requiredRevision);
 
if ( hasProductInstall && !hasRequestedVersion ) {
	// DO NOT MODIFY THE FOLLOWING FOUR LINES
	// Location visited after installation is complete if installation is required
	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
	var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;
 
	AC_FL_RunContent(
		"src", "playerProductInstall",
		"FlashVars", 
 
"MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
		"width", "${width}",
		"height", "${height}",
		"align", "middle",
		"id", "${application}",
		"quality", "high",
                "wmode", "opaque",
		"bgcolor", "${bgcolor}",
		"name", "${application}",
		"allowScriptAccess","sameDomain",
		"type", "application/x-shockwave-flash",
		"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);
} else if (hasRequestedVersion) {
	// if we've detected an acceptable version
	// embed the Flash Content SWF when all tests are passed
	AC_FL_RunContent(
			"src", "${swf}",
			"width", "${width}",
			"height", "${height}",
			"align", "middle",
			"id", "${application}",
			"quality", "high",
                        "wmode", "opaque",
                        "bgcolor", "${bgcolor}",
			"name", "${application}",
			"allowScriptAccess","sameDomain",
			"type", "application/x-shockwave-flash",
			"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
  	+ 'This content requires the Adobe Flash Player. '
   	+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent);  // insert non-flash content
  }
// -->
function moveIFrame(x,y,w,h) {
    var frameRef=document.getElementById("myFrame");
    frameRef.style.left=x;
    frameRef.style.top=y;
    var iFrameRef=document.getElementById("myIFrame");   
   iFrameRef.width=w;
   iFrameRef.height=h;
 
 var frameRef2=document.getElementById("myFrame2");
    frameRef2.style.left=x;
    frameRef2.style.top=y;
    var iFrameRef2=document.getElementById("myIFrame2");   
   iFrameRef2.width=w;
   iFrameRef2.height=h;
}
 
function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";
     document.getElementById("myFrame2").style.visibility="hidden";
}
 
function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
    document.getElementById("myFrame2").style.visibility="visible";
}
 
function loadIFrame(url){
   document.getElementById("myFrame").innerHTML = "<iframe id='myIFrame' src='" + url + 
 
"'frameborder='0'></iframe>";
   document.getElementById("myFrame2").innerHTML = "<iframe id='myIFrame2' src='" + url + 
 
"'frameborder='0'></iframe>";
 
}
</script>
<noscript>
  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="${application}" width="${width}" height="${height}"
 
 
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="${swf}.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="${bgcolor}" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
				width="${width}" height="${height}" name="${application}" 
 
align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="sameDomain"
				type="application/x-shockwave-flash"
                                wmode="opaque" 
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
</noscript>
<div id="myFrame" 
 
style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"></div>
<div id="myFrame2" 
 
style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"></div>
</body>
</html>

iframe.mxml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?xml version="1.0" encoding="utf-8"?>
 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    resize="callLater(moveIFrame)"
    move="callLater(moveIFrame)">
 
    <mx:Script>
    <![CDATA[
 
        import flash.external.ExternalInterface;
        import flash.geom.Point;
        import flash.net.navigateToURL;
 
        private var __source: String;
 
        /**
         * Move iframe through ExternalInterface.  The location is determined using localToGlobal()
         * on a Point in the Canvas.
         **/
        private function moveIFrame(): void
        {
 
            var localPt:Point = new Point(0, 0);
            var globalPt:Point = this.localToGlobal(localPt);
 
            ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
        }
 
        /**
         * The source URL for the IFrame.  When set, the URL is loaded through ExternalInterface.
         **/
        public function set source(source: String): void
        {
            if (source)
            {
 
                if (! ExternalInterface.available)
                {
                    throw new Error("ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
                }
                __source = source;
                ExternalInterface.call("loadIFrame", source);
                moveIFrame();
            }
        }
 
        public function get source(): String
        {
            return __source;
        }
 
        /**
         * Whether the IFrame is visible.  
         **/
        override public function set visible(visible: Boolean): void
        {
            super.visible=visible;
 
            if (visible)
            {
                ExternalInterface.call("showIFrame");
            }
            else 
            {
                ExternalInterface.call("hideIFrame");
            }
        }
 
    ]]>
    </mx:Script>
 
</mx:Canvas>

**Jim_Nastiq** · 24/02/2010, 14h03

ton Iframe(compo flex) appelle la méthode javascript moveIframe pour le placement de celle ci, hors dans ta méthode js tu affecte les propriétés à tes 2 iframes, donc elles sont forcement superposées.

Tu devrais modifier le code de façon a n'affecter uniquement qu'une seule des 2 iframe, en passant la frame(soit un nom ou bien un index) que tu souhaites modifier en paramètre à ta méthode JS.

**MrVentouse** · 24/02/2010, 14h12

Donc si je comprends bien...ce que tu me dis...c'est de changer les coordonnées d'une des frames pour éviter qu'elles se superposent..?

Même dans ce cas là...ce sera toujours le même site qui est affiché...

Sinon, j'ai dû mal interpreter ton explication...

**T_bo_** · 24/02/2010, 15h33

Non, il te dit que c'est cette fonction qui "déconne" car quand tu l'appelles tu superposes tes 2 iFrame.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function moveIFrame(x,y,w,h) {
    var frameRef=document.getElementById("myFrame");
    frameRef.style.left=x;
    frameRef.style.top=y;
    var iFrameRef=document.getElementById("myIFrame");   
   iFrameRef.width=w;
   iFrameRef.height=h;
 
 var frameRef2=document.getElementById("myFrame2");
    frameRef2.style.left=x;
    frameRef2.style.top=y;
    var iFrameRef2=document.getElementById("myIFrame2");   
   iFrameRef2.width=w;
   iFrameRef2.height=h;
}

Là au final tu as ça : frameRef.style.left = frameRef2.style.left =x idem pour les autres propriétés;

Il te faudrait un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
 
function moveIFrame(FrameToMove, IFrameToMove,x,y,w,h) {
    var frameRef=document.getElementById(FrameToMove);
    frameRef.style.left=x;
    frameRef.style.top=y;
    var iFrameRef=document.getElementById(IFrameToMove);   
   iFrameRef.width=w;
   iFrameRef.height=h;

Et que tu passes depuis ton flex les références FrameToMove et IFrameToMove en gros.

HTML dans flex (deux IFrame)

Flex

Vue hybride

Discussions similaires

Partager

Partager