|
|
相关文章推荐
|
飘逸的登山鞋 · 黄旭深夜与小G娜约会！rapper圈真的很乱吗？· 3 月前 · |
|
|
强健的围巾 · 十本非常经典的高品质玄幻小说，推荐喜欢玄幻的 ...· 4 月前 · |
|
|
光明磊落的消防车 · 经典纪录片《空中浩劫》内容索引_手机搜狐网· 10 月前 · |
|
|
爱旅游的感冒药 · 思想政治教育的主要内容是什么？_中国人大网· 1 年前 · |
|
|
率性的红酒 · 认识盱眙，从十三香小龙虾说起· 1 年前 · |
更改iframe src而不更新页面
问
更改iframe src而不更新页面
EN
EN
Stack Overflow用户
提问于
2018-01-15 02:45:13
回答 2
查看 2.1K
关注 0
票数 0
查看我的HTML代码：
代码语言：
javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title">SECRETS OF SUPERIOR CUSTOMER SERVICE (July 22, 2016)</p>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://chishare.cc/embed/2107778410/" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
我的主要问题是:如何在不刷新页面的情况下更改这个iframe视频？如下所示：
代码语言：
javascript
复制
<button type="button" onclick="src1()">Change to video 1</button>
<button type="button" onclick="src2()">Change to video 2</button>
<button type="button" onclick="src3()">Change to video 3</button>
<button type="button" onclick="src4()">Change to video 4</button>及其各自的职能：
代码语言：
javascript
复制
function src1(){
-- Change the iframe src link of myModal
function src2(){
-- Change the iframe src link of myModal
...你能帮帮我吗?谢谢
EN
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-15 03:02:44
第一步:使用一个ID作为iframe.
代码语言：
javascript
复制
<iframe id="FrameId"></iframe>第二步:更新你的按钮。
代码语言：
javascript
复制
<button type="button" onclick="ChangeSource(1);">Change to video 1</button>第三步:包括这个功能..。
代码语言：
javascript
复制
function ChangeSource(Button){
if(Button==1){FrameId.src='URL 1';} else
if(Button==2){FrameId.src='URL 2';} else
if(Button==3){FrameId.src='URL 3';} else
if(Button==4){FrameId.src='URL 4';}
}
票数 0
EN
Stack Overflow用户
发布于 2018-01-15 03:15:07
我建议使用1函数而不是4，并将您的链接作为数据添加到每个按钮中。您还可以在运行时动态添加这些链接。我在按钮1的演示中使用了youtube上的占位符视频，如您所见，您可以使用下面的jQuery函数切换您的iframe。
代码语言：
javascript
复制
$( document ).ready(function() {
$('.changer').click(function(e){
changeIframe(e);
function changeIframe(e) {
var link = $(e.currentTarget).data('link');
$('.embed-responsive-item').attr('src',link);
alert('link is now '+link);
}
代码语言：
javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<button class="changer" type="button" data-link="https://www.youtube.com/watch?v=ScMzIvxBSi4">Change to video 1</button>
<button class="changer" type="button" data-link="">Change to video 2</button>
<button class="changer" type="button" data-link="">Change to video 3</button>
<button class="changer" type="button" data-link="">Change to video 4</button>
<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title">SECRETS OF SUPERIOR CUSTOMER SERVICE (July 22, 2016)</p>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://chishare.cc/embed/2107778410/" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
推荐文章
|
|
飘逸的登山鞋 · 黄旭深夜与小G娜约会！rapper圈真的很乱吗？ 3 月前 |
|
|
光明磊落的消防车 · 经典纪录片《空中浩劫》内容索引_手机搜狐网 10 月前 |
|
|
爱旅游的感冒药 · 思想政治教育的主要内容是什么？_中国人大网 1 年前 |
|
|
率性的红酒 · 认识盱眙，从十三香小龙虾说起 1 年前 |