我试图在应用的不同标签中打开iFrame。发生的问题是，如果我将iFrame放在第一个标签页（应用页面）中，我就无法访问它下面的任何标签页。但是如果有<p>Bla Bla</p>这样的文本就可以了。如果我把iFrame放在最后一个标签中，以上所有工作都很好。我是html5跨平台应用程序的新手，也是intel XDK的新手。提前谢谢。
CODE：
<!DOCTYPE html>
<html>
<head>
<title>Grid View App template</title>
<!--
This template can be used for photo app with grid view that will open detail view, for applications like 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 for XDK "legacy" container api calls -->
<script src="intelxdk.js"></script>
<!-- phantom library, needed for Cordova api calls -->
<script src="cordova.js"></script>
<!-- phantom library, needed for XDK "legacy" container CORS -->
<script src="xhr.js"></script>
<script>
var onDeviceReady=function(){ // called when Cordova is 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 only screen and (max-width : 1024px) {
.grid-photo li {width: 12.5%; padding-bottom: 12.5%;}
}
@media only screen and (max-width : 768px) {
.grid-photo li {width: 16.6%; padding-bottom: 16.6%;}
}
@media only screen and (max-width : 480px) {
.grid-photo li {width: 25%; padding-bottom: 25%;}
}
@media only screen and (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 for 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 is detail view for Item 2</p>
</div>
<div class="panel" title="Item 3" id="item3">
<p>This is detail view for Item 3</p>
</div>
<div class="panel" title="Item 4" id="item4">
<p>This is detail view for Item 4</p>
</div>
<div class="panel" title="Item 5" id="item5">
<p>This is detail view for Item 5</p>
</div>
<div class="panel" title="Item 6" id="item6">
<p>This is detail view for Item 6</p>
</div>
<div class="panel" title="Item 7" id="item7">
<p>This is detail view for Item 7</p>
</div>
<div class="panel" title="Item 8" id="item8">
<p>This is detail view for Item 8</p>
</div>
<div class="panel" title="Item 9" id="item9">
<p>This is detail view for Item 9</p>
</div>
<div class="panel" title="Item 10" id="item10">
<p>This is detail view for Item 10</p>
</div>
<div class="panel" title="Item 11" id="item11">
<p>This is detail view for Item 11</p>
</div>
<div class="panel" title="Item 12" id="item12">
<p>This is detail view for Item 12</p>
</div>
<div class="panel" title="Item 13" id="item13">
<p>This is detail view for Item 13</p>
</div>
<div class="panel" title="Item 14" id="item14">
<p>This is detail view for Item 14</p>
</div>
<div class="panel" title="Item 15" id="item15">
<p>This is detail view for Item 15</p>
</div>
<div class="panel" title="Item 16" id="item16">
<p>This is detail view for Item 16</p>
</div>
<div class="panel" title="Item 17" id="item17">
<p>This is detail view for Item 17</p>
</div>
<div class="panel" title="Item 18" id="item18">
<p>This is detail view for Item 18</p>
</div>
<div class="panel" title="Item 19" id="item19">
<p>This is detail view for Item 19</p>
</div>
<div class="panel" title="Item 20" id="item20">
<p>This is detail view for Item 20</p>
</div>
<div class="panel" title="Item 21" id="item21">
<p>This is detail view for Item 11</p>
</div>
<div class="panel" title="Item 22" id="item22">
<p>This is detail view for Item 12</p>
</div>
<div class="panel" title="Item 23" id="item23">
<p>This is detail view for Item 13</p>
</div>
<div class="panel" title="Item 24" id="item24">
<p>This is detail view for Item 14</p>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
问题与简单的HTML语法有关。 只需关闭iframe标记即可。
即：
<iframe width="100%" height="600px" frameborder="0" src="http://www.google.com"></iframe>
之前的行为是由于缺少闭包标记（所有其余代码都是＆＃34;陷阱＆＃34;在之前打开的IFRAME内）。