我有一堆标签,在每个标签中我都有一个iframe,我只想在按下标签时加载它。我不希望在加载页面后加载所有应用程序。如何实现这一目标?
我是JSP和Javascript的新手..
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">First Menu</a></li>
<li><a data-toggle="tab" href="#menu2">Second Menu</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<iframe id="iframe1" src=""></iframe>
</div>
<div id="menu1" class="tab-pane fade">
<iframe id="iframe2" src=""></iframe>
</div>
<div id="menu2" class="tab-pane fade">
<iframe id="iframe2" src=""></iframe>
</div>
</div>
答案 0 :(得分:2)
根据@PDKnight的建议,你应该使用ajax,在解决方案的最后,你会明白为什么。
这是一个适合你的小提琴(jQuery代码)。
jQuery(document).ready(function($) {
$('.nav-tabs > li > a').on('click', function(event) {
//avoid <a> tag to load his href
event.preventDefault();
//getting the main subjects
var id_of_selected = $(this).attr('load-in');
var link_to_load = $(this).attr('href');
var iframe_to_load = $(document).find('#' + id_of_selected);
console.log(iframe_to_load);
//make the magic
if (iframe_to_load.length) {
iframe_to_load.attr('src', link_to_load); //this fires the link to destinated iframe
iframe_to_load.parent().addClass('active'); //this make the parent div container of iframe visible
}
});
});
&#13;
.tab-pane {
display: none;
}
.active {
display: block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11173.933562701173!2d12.2363393!3d45.560717000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sit!2sit!4v1452004351715" load-in="iframe1">WORKING!</a>
</li>
<li><a data-toggle="tab" href="http://www.youtube.com" load-in="iframe2">First Menu</a>
</li>
<li><a data-toggle="tab" href="http://www.facebook.com" load-in="iframe3">Second Menu</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in">
<iframe width="200" height="200" style="width:200px;height:200px;" id="iframe1" src=""></iframe>
</div>
<div id="menu1" class="tab-pane fade">
<iframe id="iframe2" src=""></iframe>
</div>
<div id="menu2" class="tab-pane fade">
<iframe id="iframe3" src=""></iframe>
</div>
</div>
&#13;
您将看到(在控制台中按下&#34;第一个菜单&#34;或&#34; Secon菜单&#34;)您无法加载不允许X的链接-ORIGIN read more here)。 但您可以在iframe中加载第一个标签(工作),因为Google地图允许X-ORIGIN 嵌入。
如果为你工作,请竖起大拇指;)