使用iframe显示listview中的视频列表
使用iframe显示listview中的视频列表
提问于 2013-11-22 11:25:02
我有以下代码，我计划在listview中显示视频列表(假设视频列表或src标签的值来自jSON)
<body>
<div data-url="demo-page" data-role="page" id="demo-page" data-theme="d">
<div data-role="header" data-theme="c">
<h1>Videos</h1>
<a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
</div><!-- /header -->
<div data-role="content" id="contentVideosId" class="contentVideosClass">
<div class="video-wrapper" data-iscroll>
<ul data-role="listview" id="video-list" data-split-icon="star" data-theme="d">
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
</ul>
</div><!-- /video=wrapper -->
</div><!-- /content -->
<div data-role="panel" id="left-panel" data-theme="c">
<div data-role="listview" >
<ul data-role="listview" data-theme="d">
<li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
<!-- <li data-role="list-divider">PlayList</li> -->
<!-- <li></li> -->
</ul>
</div>
<div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="b" data-content-theme="d">
<div data-role="collapsible" id="staredPlayListDiv">
<h3>Stared PlayList</h3>
<ul data-role="listview" id="staredPlayListUl">
</ul>
</div>
<div data-role="collapsible" id="playListDiv">
<h3>PlayList</h3>
<ul data-role="listview" id="playListUl">
</ul>
</div>
</div> <!-- Collapisble-set end -->
</div><!-- /panel -->
</div>
</body>我正在使用下面的js和css组合。
<link rel="stylesheet" href="css/plugin/normalize.css">
<link rel="stylesheet" href="css/plugin/jquery.mobile-1.3.2.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Scripts -->
<script src="js/plugin/jquery-1.9.0.min.js"></script>
<script src="js/plugin/modernizr-2.6.1.min.js"></script>
<script src="js/plugin/jquery.mobile-1.3.2.min.js"></script>当我在浏览器中呈现这个页面时，我只能看到第一个iframe标签，而不是所有其他标签。另外，当我使用chrome调试器检查DOM中加载了哪些内容时，我只能看到1个iframe元素。
除了iframe之外，有没有更好的方式来显示视频列表？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20136474
复制相关文章
相似问题
腾讯云开发者
