javascript - Intel XDK template app and iFrames not working -
i'm trying open iframes within different tabs of app. problem happening if place iframe in first tab(page of app), cannot access of tabs below it. if there text such <p>bla bla</p> works fine. if put iframe in last tab, of above work fine. i'm new html5 cross platform apps, , new intel xdk. in advance.
code:
<!doctype html> <html> <head> <title>grid view app template</title> <!-- template can used photo app grid view open detail view, applications photo app or instagram app. --> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" /> <link rel="stylesheet" type="text/css" href="appframework/af.ui.css" /> <link rel="stylesheet" type="text/css" href="appframework/icons.css" /> <script type="text/javascript" charset="utf-8" src="appframework/appframework.ui.min.js"></script> <!-- phantom library, needed xdk "legacy" container api calls --> <script src="intelxdk.js"></script> <!-- phantom library, needed cordova api calls --> <script src="cordova.js"></script> <!-- phantom library, needed xdk "legacy" container cors --> <script src="xhr.js"></script> <script> var ondeviceready=function(){ // called when cordova ready if( window.cordova && navigator.splashscreen ) { // cordova api detected $.ui.launch(); navigator.splashscreen.hide() ; // hide splash screen } } ; document.addeventlistener("deviceready", ondeviceready, false) ; </script> <script> $.ui.autolaunch = false; $.ui.backbuttontext = "back"; $(document).ready(function(){ $.ui.launch(); }); </script> <style> /* css responsive square grid */ .grid-photo {margin:3px -7px;} .grid-photo:after {content:'';display:block;clear:both;} .grid-photo li {position: relative; display:block; float:left; width: 10%; padding-bottom: 10%;} .grid-photo .grid-photo-box {position: absolute;left: 3px;right: 3px;top: 3px;bottom: 3px; background-color: rgba(128,128,128,0.2);} .grid-photo img {width:100%;height:100%} @media screen , (max-width : 1024px) { .grid-photo li {width: 12.5%; padding-bottom: 12.5%;} } @media screen , (max-width : 768px) { .grid-photo li {width: 16.6%; padding-bottom: 16.6%;} } @media screen , (max-width : 480px) { .grid-photo li {width: 25%; padding-bottom: 25%;} } @media screen , (max-width : 320px) { .grid-photo li {width: 33.3%; padding-bottom: 33.3%;} } </style> </head> <body> <div id="afui"> <div id="content" style=""> <!--grid view page--> <div class="panel" title="title" id="gridview" selected="true"> <header> <h1>title</h1> <a href="#" class="button icon refresh" style="float:right"></a> </header> <div class="grid-photo"> <li><div class="grid-photo-box"><a href="#item1"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item2"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item3"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item4"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item5"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item6"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item7"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item8"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item9"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item10"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item11"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item12"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item13"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item14"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item15"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item16"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item17"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item18"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item19"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item20"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item21"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item22"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item23"><img src="" /></a></div></li> <li><div class="grid-photo-box"><a href="#item24"><img src="" /></a></div></li> </div> <a id="more" class="button block">load more</a> </div> <!--detail view pages each grid items--> <div class="panel" title="item 1" id="item1"> <p><iframe width="100%" height="600px" frameborder="0" src="http://www.google.com" /></p> </div> <div class="panel" title="item 2" id="item2"> <p>this detail view item 2</p> </div> <div class="panel" title="item 3" id="item3"> <p>this detail view item 3</p> </div> <div class="panel" title="item 4" id="item4"> <p>this detail view item 4</p> </div> <div class="panel" title="item 5" id="item5"> <p>this detail view item 5</p> </div> <div class="panel" title="item 6" id="item6"> <p>this detail view item 6</p> </div> <div class="panel" title="item 7" id="item7"> <p>this detail view item 7</p> </div> <div class="panel" title="item 8" id="item8"> <p>this detail view item 8</p> </div> <div class="panel" title="item 9" id="item9"> <p>this detail view item 9</p> </div> <div class="panel" title="item 10" id="item10"> <p>this detail view item 10</p> </div> <div class="panel" title="item 11" id="item11"> <p>this detail view item 11</p> </div> <div class="panel" title="item 12" id="item12"> <p>this detail view item 12</p> </div> <div class="panel" title="item 13" id="item13"> <p>this detail view item 13</p> </div> <div class="panel" title="item 14" id="item14"> <p>this detail view item 14</p> </div> <div class="panel" title="item 15" id="item15"> <p>this detail view item 15</p> </div> <div class="panel" title="item 16" id="item16"> <p>this detail view item 16</p> </div> <div class="panel" title="item 17" id="item17"> <p>this detail view item 17</p> </div> <div class="panel" title="item 18" id="item18"> <p>this detail view item 18</p> </div> <div class="panel" title="item 19" id="item19"> <p>this detail view item 19</p> </div> <div class="panel" title="item 20" id="item20"> <p>this detail view item 20</p> </div> <div class="panel" title="item 21" id="item21"> <p>this detail view item 11</p> </div> <div class="panel" title="item 22" id="item22"> <p>this detail view item 12</p> </div> <div class="panel" title="item 23" id="item23"> <p>this detail view item 13</p> </div> <div class="panel" title="item 24" id="item24"> <p>this detail view item 14</p> </div> </div> </div> </body> </html>
the problem related simple html syntax. close iframe tag , work.
i.e.:
<iframe width="100%" height="600px" frameborder="0" src="http://www.google.com"></iframe> the previous behavior due missing closure tag (all rest of code "trapped" inside opened iframe).
Comments
Post a Comment