The following markup works. For your information. Please replace the png names to your png/jpg before running.
I'm not sure how to use <js:Browser> related tags, by the way. ====================================================================================================================== <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:mx = "library://ns.apache.org/royale/mx" xmlns:s = "library://ns.apache.org/royale/spark" xmlns:js = "library://ns.apache.org/royale/basic" initialize = "onInit"> <fx:Script> <![CDATA[ private function onInit():void{ COMPILE::JS{ (iframe1.element as HTMLIFrameElement).sandbox = "allow-top-navigation allow-forms allow-scripts allow-same-origin"; (iframe2.element as HTMLIFrameElement).sandbox = "allow-top-navigation allow-forms allow-scripts allow-same-origin"; } } ]]> </fx:Script> <!-- <js:valuesImpl> <js:SimpleCSSValuesImpl /> </js:valuesImpl> --> <s:Scroller width="100%" height="100%"> <s:Group> <mx:TabNavigator x="96" y="9" width="763" height="1078" tabFocusEnabled="false"> <s:NavigatorContent id="navigator1" width="100%" height= "100%" label="PHOTO-1"> <s:Scroller id="scroler1" x="0" y="0" width="763" height ="1057"> <s:Group> <!-- <js:initialView> --> <js:View x="0" y="0" width="800" height= "1078"> <js:WebBrowser localId="iframe1" url= "photo1.png" x="100" y="9" width="800" height="1057"/> </js:View> <!-- </js:initialView> --> </s:Group> </s:Scroller> </s:NavigatorContent> <s:NavigatorContent id="navigator2" width="100%" height= "100%" label="PHOTO-2"> <s:Scroller id="scroler2" x="0" y="0" width="763" height ="1057"> <s:Group> <!-- <js:initialView> --> <js:View x="0" y="0" width="800" height= "1078"> <js:WebBrowser localId="iframe2" url= "photo2.png" x="100" y="9" width="800" height="1057"/> </js:View> <!-- </js:initialView> --> </s:Group> </s:Scroller> </s:NavigatorContent> </mx:TabNavigator> </s:Group> </s:Scroller> </s:Application>